Question

我有很多重复的Jquery代码，但差别很小。我想知道是否有可能将以下Jquery代码合并为一个：

  $(".dropdown-menu-attributes li a").click(function(){
    $("#modal-button-attributes:first-child").text($(this).text());
  });

  $(".dropdown-menu-operators li a").click(function(){
    $("#modal-button-operators:first-child").text($(this).text());
  });

  $(".dropdown-menu-and-or li a").click(function(){
    $("#modal-button-and-or:first-child").text($(this).text());
  });

我试过这个，但对第二和第三课没有用。

  $(".dropdown-menu-attributes .dropdown-menu-and-or .dropdown-menu-operators li a").click(function(){
    $("#modal-button-attributes:first-child #modal-button-operators:first-child #modal-button-and-or:first-child").text($(this).text());
  });

Answer 1

您想使用, (Multiple Selector)选择器：

$(".dropdown-menu-attributes,.dropdown-menu-and-or,.dropdown-menu-operators")

首先找到这三个元素，然后在结果集上进行另一次搜索find li a。最终的代码看起来就是这样：

$(".dropdown-menu-attributes,.dropdown-menu-and-or,.dropdown-menu-operators")
    .find('li a')
    .click(function(){

    });

要获得正确的ID，您需要将该ID存储在某处。一种方法是使用data-*属性将其添加到包含这些类的相应元素。并使用closest

搜索该内容

＆＃13;

$(".dropdown-menu-attributes,.dropdown-menu-and-or,.dropdown-menu-operators")
  .find('li a')
  .on('click', function(e) {
    var id = $(this).closest('[data-modal-button-id]').data().modalButtonId;
    console.log('#modal-button-'+id+':first-child');
    $('#modal-button-'+id+':first-child').text($(this).text());
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-menu-attributes"  data-modal-button-id="attributes">
  <ul>
    <li><a>test1</a></li>
  </ul>
</div>
<div class="dropdown-menu-and-or" data-modal-button-id="and-or">
  <ul>
    <li><a>test2</a></li>
  </ul>
</div>
<div class="dropdown-menu-operators" data-modal-button-id="operators">
  <ul>
    <li><a>test3</a></li>
  </ul>
</div>

＆＃13;

如何命名data-*属性取决于您，最有可能是更好的名称。

一般情况下，我会选择其他设置并使用公共类

＆＃13;

$('.dropdown-menu li a')
  .on('click', function(e) {
    var id = $(this).closest('.dropdown-menu').data().modalButtonId;
    console.log('#modal-button-'+id+':first-child');
    $('#modal-button-'+id+':first-child').text($(this).text());
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-menu dropdown-menu-attributes"  data-modal-button-id="attributes">
  <ul>
    <li><a>test1</a></li>
  </ul>
</div>
<div class="dropdown-menu dropdown-menu-and-or" data-modal-button-id="and-or">
  <ul>
    <li><a>test2</a></li>
  </ul>
</div>
<div class="dropdown-menu dropdown-menu-operators" data-modal-button-id="operators">
  <ul>
    <li><a>test3</a></li>
  </ul>
</div>

＆＃13;

将jquery代码与几个类和id合并

1 个答案: