问题：

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

子车文康

2023-03-14

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

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

高优先级是引导类：btn btn-危险btn-sm下拉切换
中等优先级是引导类：btn btn警告btn-sm下拉切换
低优先级是引导类：btn btn-成功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;
}

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

如果以上内容不清楚，我很乐意尝试解释更多细节。

示例：

用户点击第一个'High'按钮，这是当前bt类按钮的危险
用户从下拉列表中选择介质
按钮现在已更改为文本中，并具有类btn btn警告btn-sm下拉切换，现在应该有下拉选项为高，低和服务请求

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

共有1个答案

裴卓君

2023-03-14

您可以添加一些额外的信息到按钮（如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 text Comparison，所以不需要数据优先级标记，但您可以重写脚本以使用它）

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

在这里小提琴

类似资料：

单击按钮后，下拉列表将重置

我有这个脚本：我在这里包括当addBtn点击下拉o select标记将重置为其默认值。此代码：这是我的示例表：当我尝试它时，我选择值，然后点击添加按钮，但它仍然没有重置，而是显示我选择的一个。而当我在下拉列表中没有选择任何内容而再次添加时，该值为空或无值。我认为它在后端工作，但在我显示的一个不工作。有人告诉我问题出在哪里吗？
引导4，在导航菜单项中使用多个下拉按钮

我试图找出一个解决方案，在菜单项中有子菜单。我有2个下拉按钮（报告和视图）在菜单项是一个下拉项目本身。当我点击第一个按钮时，它会在下面显示子菜单，但是当我点击第二个下拉按钮时，它仍然会显示第一个子菜单项，而不是第二个子菜单项。我尝试使用btn-group对每个按钮进行分组，但当我这样做时，它会破坏按钮，当你点击按钮时，菜单就会消失。有什么建议吗？谢啦
单击按钮时更改OptionMenu的选项

问题内容：说我有一个选项菜单，其中包含要连接的网络列表。现在，当用户按下刷新按钮时，我想更新用户可以连接的网络列表。我无法使用，因为我浏览了所有内容，但没有看到看起来像我所做选择的条目。我不认为这可以使用tk变量来更改，因为没有这样的事情。问题答案：我修改了脚本以演示如何执行此操作：单击“刷新”按钮后，将清除network_select中的选项，并插入new_choices中的选项。
更改按钮单击背景，仅使用CSS？

问题内容：点击时可以更改背景颜色吗？全部，仅使用CSS和HTML5？问题答案：基于我在评论中发布的小提琴，我对它进行了少许修改，以使用Bootstrap按钮CSS。只需包含Bootstrap的CSS文件，然后使用以下代码即可。 HTML CSS 这将使用相邻的兄弟选择器。它在这里起作用：（我已经添加了防止选择标签文本的标签，但是标签不是必需的）浏览器支持 Chrome，Firefox
按下提交按钮后更改表单值

问题内容： [编辑]经过大量挖掘，我发现问题出在我如何将CKEditor集成到页面中。如公认的答案所述，在这种情况下，简单而明显的方法确实有效。你好在按下“提交”按钮之后，但在实际提交之前，我需要更改表单的值。我尝试挂钩到表单的“ submit”事件，并在那里手动更改文本字段的值，但是看起来实际上并没有更改提交的值。有任何想法吗？问题答案：我对您的说法感到奇怪，即处理程序对您不起作
如何知道单击按钮的列表项的索引

所以我正在处理一个列表视图，我想实现一个删除按钮。但由于某种原因，每当我按下任何列表项上的delete按钮时，列表中的最后一项就会自动删除。我试过了几乎所有的东西，但是我无法理解我如何能够知道按钮被点击的项目的索引，这样我就可以轻松地删除那个特定的项目。这是代码：

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

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档