单击引导下拉项，使用toggleClass Jquery更改按钮类

Posted 2023-05-08

【中文标题】单击引导下拉项，使用toggleClass Jquery更改按钮类

【英文标题】：Bootstrap dropdown item clicked, change button class using toggleClass Jquery

【发布时间】：2018-08-08 04:11:26

【问题描述】：

目前我的网站上有多个按钮，这些组件使用引导程序。单击每个按钮时，会出现一个下拉菜单，其中包含不同的优先级，具体取决于用户选择的按钮。我正在尝试找到一种方法来更新按钮类以匹配所选的优先级。

例如针对引导组件类的优先级：

高优先级是引导类：btn btn-danger btn-sm dropdown-toggle 中等优先级是引导类：btn btn-warning btn-sm dropdown-toggle 低优先级是引导类：btn btn-success btn-sm dropdown-toggle 服务请求优先级是引导类：btn btn-info btn-sm dropdown-toggle

html 代码：

    <div id="tableBody"><div class="btn-group"><button type="button" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">High</button>
  <div class="dropdown-menu"><a datapriority="MEDIUM"  class="dropdown-item">Medium</a><a datapriority="LOW"  class="dropdown-item">Low</a><a datapriority="SERVICEREQUEST" 
      class="dropdown-item">ServiceRequest</a></div>
</div>

<div class="btn-group"><button type="button" class="btn btn-warning btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Medium</button>
  <div class="dropdown-menu"><a datapriority="HIGH"  class="dropdown-item">High</a><a datapriority="LOW"  class="dropdown-item">Low</a><a datapriority="SERVICEREQUEST" 
      class="dropdown-item">ServiceRequest</a></div>
</div>

<div class="btn-group"><button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Low</button>
  <div class="dropdown-menu"><a datapriority="HIGH"  class="dropdown-item">High</a><a datapriority="MEDIUM"  class="dropdown-item">Medium</a><a datapriority="SERVICEREQUEST" 
      class="dropdown-item">ServiceRequest</a></div>
</div>

<div class="btn-group"><button type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ServiceRequest</button>
  <div class="dropdown-menu"><a datapriority="HIGH"  class="dropdown-item">High</a><a datapriority="MEDIUM"  class="dropdown-item">Medium</a><a datapriority="LOW" 
      class="dropdown-item">Low</a></div>
</div>

<div class="btn-group"><button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">NoPriority</button>
  <div class="dropdown-menu"><a datapriority="HIGH"  class="dropdown-item">High</a><a datapriority="MEDIUM"  class="dropdown-item">Medium</a><a datapriority="LOW" 
      class="dropdown-item">Low</a><a datapriority="SERVICEREQUEST"  class="dropdown-item">ServiceRequest</a></div>
</div>

<div class="btn-group"><button type="button" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">High</button>
  <div class="dropdown-menu"><a datapriority="MEDIUM"  class="dropdown-item">Medium</a><a datapriority="LOW"  class="dropdown-item">Low</a><a datapriority="SERVICEREQUEST" 
      class="dropdown-item">ServiceRequest</a></div>
</div>

<div class="btn-group"><button type="button" class="btn btn-warning btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Medium</button>
  <div class="dropdown-menu"><a datapriority="HIGH"  class="dropdown-item">High</a><a datapriority="LOW"  class="dropdown-item">Low</a><a datapriority="SERVICEREQUEST" 
      class="dropdown-item">ServiceRequest</a></div>
</div>

<div class="btn-group"><button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Low</button>
  <div class="dropdown-menu"><a datapriority="HIGH"  class="dropdown-item">High</a><a datapriority="MEDIUM"  class="dropdown-item">Medium</a><a datapriority="SERVICEREQUEST" 
      class="dropdown-item">ServiceRequest</a></div>
</div>

<div class="btn-group"><button type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ServiceRequest</button>
  <div class="dropdown-menu"><a datapriority="HIGH"  class="dropdown-item">High</a><a datapriority="MEDIUM"  class="dropdown-item">Medium</a><a datapriority="LOW" 
      class="dropdown-item">Low</a></div>
</div>

<div class="btn-group"><button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">NoPriority</button>
  <div class="dropdown-menu"><a datapriority="HIGH"  class="dropdown-item">High</a><a datapriority="MEDIUM"  class="dropdown-item">Medium</a><a datapriority="LOW" 
      class="dropdown-item">Low</a><a datapriority="SERVICEREQUEST"  class="dropdown-item">ServiceRequest</a></div>
</div></div>

javascript：

        //update priority
$("#tableBody").on('click', '.dropdown-item', function(e) 
      var priority = $(this).attr("datapriority");
  console.log(priority);
    //issue I am having is below
    if (priority == "HIGH") 
      console.log("first: " + priority);
      object.toggleClass('btn btn-danger btn-sm dropdown-toggle');
     else if (priority == "MEDIUM") 
      console.log("second: " + priority);
      object.toggleClass('btn btn-warning btn-sm dropdown-toggle');
     else if (priority == "LOW") 
      console.log("third: " + priority);
      object.toggleClass('btn btn-success btn-sm dropdown-toggle');
     else if (priority == "SERVICEREQUEST") 
      console.log("fourth: " + priority);
      object.toggleClass('btn btn-info btn-sm dropdown-toggle');
    

);

CSS：

    @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body 
  margin: 10px;

我还想确保按钮上的文本发生变化，以表示选择的优先级。另外我想确保只有当一个按钮被点击时，只有那个按钮才应该更新不是所有与该类匹配的按钮。

如果上述内容不清楚，我很乐意尝试提供更多详细信息。

例子：

用户单击第一个“高”按钮，该按钮当前是 bt 类按钮危险 用户从下拉列表中选择媒体 按钮现在已更改为文本“中”并具有类“btn btn-warning btn-sm dropdown-toggle”，现在应该具有下拉选项为“高”、“低”和“服务请求”

Jfiddle 也在这里：https://jsfiddle.net/Lohjzvqc/7/

【参考方案1】：

您可以向按钮（例如 id）和下拉选项添加一些附加信息。例如：

<div class="btn-group">
<button id='btn' type="button" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">High</button>
<ul class="dropdown-menu">
<li><a name="priority" data-priority="medium" class="dropdown-item">Medium</a></li>
<li><a name="priority" data-priority="low" class="dropdown-item">Low</a></li>
<li><a name="priority" data-priority="servicerequest" class="dropdown-item">ServiceRequest</a></li>

然后下一个脚本通过在select中选择选项来改变按钮样式和文本（它使用选项文本比较，所以数据优先标签是不必要的，但你可以重写脚本来使用它）

$('a[name=priority]').on('click',function() 
  const btn = $('#btn');
  const selectedPrior = $(this);
  switchPriority(btn, selectedPrior);
  switchBtnStyle(btn);
);

function switchPriority(currentPriorBtn, newPriorA)
    const btnText = currentPriorBtn.text();
  const aText = newPriorA.text();
  newPriorA.text(btnText);
  currentPriorBtn.text(aText);


function switchBtnStyle(btn)
    const btnText = btn.text();
  btn.removeClass();
  switch(btnText)
    case 'High':
    btn.addClass('btn btn-danger btn-sm dropdown-toggle');
    break;
    case 'Low':
    btn.addClass('btn btn-success btn-sm dropdown-toggle');
    break;
    case 'Medium':
    btn.addClass('btn btn-warning btn-sm dropdown-toggle');
    break;
    case 'ServiceRequest':
    btn.addClass('btn btn-info btn-sm dropdown-toggle');
    break;
  

小提琴here

【讨论】：

这是否意味着，对于每个按钮，我必须为按钮创建一个 ID，并为下拉列表中的项目创建一个 ID？然后点击下拉列表中的每个项目？

jsfiddle.net/mmww8t4L/4 例如这不会通过使用相同的 ID 添加一个新按钮来工作

在这个解决方案中 - 是的，但是您可以使用 jquery 的 .nearest 或 .parent 规范来查找下拉按钮附近，而无需添加任何 id。另一方面，如果每个按钮都有类似的下拉菜单，则可以只使用一个菜单，每次单击按钮时都会打开该菜单。在下拉菜单打开之前，您可以以编程方式显示或隐藏您不想看到的菜单项

@RA19 你需要把这个：const btn = $('#btn'); 改成这个const btn = $(this).parent().parent().parent().find('button');。检查这个jsfiddle.net/9ghx291f/1