代码之家 › 专栏 › 技术社区 › RA19

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

dropdown jquery javascript

RA19 · 技术社区 · 6 年前

目前我的网站上有多个按钮,这些组件都使用引导。单击每个按钮时,会出现一个下拉列表,其优先级取决于用户选择的按钮。我试图找到一种方法来更新button类以匹配所选的优先级。

例如,相对于引导组件类的优先级:

高优先级是引导类:btn btn danger btn sm下拉切换
中等优先级为引导类:btn btn warning btn sm下拉切换
低优先级是引导类:btn btn success btn sm下拉切换
服务请求优先级为引导类:btn btn info btn sm下拉切换

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类按钮的危险
用户从下拉列表中选择介质
按钮现在已更改为文本“Medium”,并具有“btn btn warning btn sm dropdown toggle”类,现在应具有“High”、“Low”和“Service Request”下拉选项

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

1 回复 | 直到 6 年前

Alexander Demichev 6 年前

您可以在按钮(如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中选择option来更改按钮样式和文本(它使用option文本比较,所以不需要数据优先级标记,但您可以重写脚本以使用它)

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