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

Question

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

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

1. 高优先级是引导类:btn btn-danger btn-sm dropdown-toggle
2. 中等优先级是引导类:btn btn-warning btn-sm dropdown-toggle
3. 低优先级是引导类:btn btn-success btn-sm dropdown-toggle
4. 服务请求优先级为引导类: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;
}

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

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

示例:

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

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

Answer 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>

然后下一个脚本通过在选择中选择选项来更改按钮样式和文本(它使用选项文本比较，因此不需要数据优先级标记，但您可以重写脚本来使用它)

$('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;
  }
}

fiddle here