Question

我正在使用Bootstrap下拉列表并显示所选项目......

它按预期工作得很好。但是如果我有多个下拉菜单，我会遇到问题。如果我要更改一个项目，所有下拉列表都在变化......虽然我正在使用jQuery中的closest元素......

Online Demo

的jQuery

jQuery('.th-icons-toggle .dropdown-menu li a').on('click', function() {
  var newIcon = jQuery(this).closest('li').find("a").html();
  jQuery('.dropdown_title').html(newIcon);
});

HTML

<h4>Select 1</h4>
<ul class="list-inline th-icons-toggle">
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown">
      <span class="dropdown_title"><i class="glyphicon glyphicon-cog"></i></span></a>
    <ul class="dropdown-menu">
      <li><a href="javascript:;"><i class="glyphicon glyphicon-cloud"></i></a></li>  
      <li><a href="javascript:;"><i class="glyphicon glyphicon-pencil"></i></a></li> 
    </ul>
  </li>
</ul>

<h4>Select 2</h4>
<ul class="list-inline th-icons-toggle">
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown">
      <span class="dropdown_title"><i class="glyphicon glyphicon-cog"></i></span></a>
    <ul class="dropdown-menu">
      <li><a href="javascript:;"><i class="glyphicon glyphicon-cloud"></i></a></li>  
      <li><a href="javascript:;"><i class="glyphicon glyphicon-pencil"></i></a></li> 
    </ul>
  </li>
</ul>

Answer 1

jQuery('.th-icons-toggle .dropdown-menu li a').on('click', function() {
  var newIcon = jQuery(this).closest('li').find("a").html();
  jQuery(this).parents('.dropdown').find('.dropdown_title').html(newIcon);
});

Answer 2

您一般定位.dropdown_title元素，而不是特定。下面的改变应该可以解决..

jQuery('.th-icons-toggle .dropdown-menu li a').on('click', function() {
  var newIcon = jQuery(this).closest('li').find("a").html();
  jQuery(this).closest('.dropdown').find('.dropdown_title').html(newIcon);
       //^^^get the element with this
});

以下是 http://localhost:15672/#/queues

Answer 3

在第一行中，this已经是锚标记，因此无需转到父标记，然后再次获取锚标记。所以你可以jQuery(this).html();

然后，你可以寻找最近的父母也有.dropdown_title作为孩子并寻找它，就像这样jQuery(this).parents('.dropdown').find('.dropdown_title')

下面修改了JQuery：JSFIDDLE

jQuery('.th-icons-toggle .dropdown-menu li a').on('click', function() {
  var newIcon = jQuery(this).html();
  console.log(newIcon);
  jQuery(this).parents('.dropdown').find('.dropdown_title').html(newIcon);
});

Bootstrap Dropdown - 显示所选项目最近元素不起作用

3 个答案: