Javascript 合并/绑定多个具有不同id或类别的标记的更改、单击事件

在我看来，我有许多标签，分类不同，ID如下：

<!-- html view -->

<div class="panel panel-default">
    <ul class="" id="tablist" role="tablist">
        <li class="getState active" id="proposed">
            <a href="#proposed"><b>Proposed</b></a>
        </li>
        <li class="getState" id="current">
            <a href="#current"><b>Current</b></a>
        </li>
        <li class="getState" id="incoming">
            <a href="#incoming"><b>Incoming</b></a>
        </li>
        <li class="getState" id="finished">
            <a href="#finished"><b>Finished</b></a>
        </li>
    </ul>
</div>

<select class="form-control" id="isProduction">
    <option value="" disabled selected>Type</option>
    <option value="production">Production</option>
    <option value="nonProduction">nonProduction</option>
</select>

<div>
    <!-- some content here like <p></p> -->
    <a href="#validity">
        <button class="btn btn-default">Validity</button>
    </a>
</div>

<div>
    <!-- some content here like <p></p> -->
    <a href="#rate">
        <button class="btn btn-default">Rate</button>
    </a>
</div>

<!-- content appear here -->
<div id="info">
    <!-- put some content here following click and selected option change -->
</div>

$( "#foo" ).bind( "mouseenter mouseleave", function() {
  $( this ).toggleClass( "entered" );
});

在这里，我可以通过恢复状态发出请求（php服务器端），然后使用此参数发出请求

如何在一个函数中组合所有这些事件，以便使用jQuery恢复php服务器端所需的所有参数？

我在文档中看到，我们可以在多个事件上创建一个绑定，如下所示：

<!-- html view -->

<div class="panel panel-default">
    <ul class="" id="tablist" role="tablist">
        <li class="getState active" id="proposed">
            <a href="#proposed"><b>Proposed</b></a>
        </li>
        <li class="getState" id="current">
            <a href="#current"><b>Current</b></a>
        </li>
        <li class="getState" id="incoming">
            <a href="#incoming"><b>Incoming</b></a>
        </li>
        <li class="getState" id="finished">
            <a href="#finished"><b>Finished</b></a>
        </li>
    </ul>
</div>

<select class="form-control" id="isProduction">
    <option value="" disabled selected>Type</option>
    <option value="production">Production</option>
    <option value="nonProduction">nonProduction</option>
</select>

<div>
    <!-- some content here like <p></p> -->
    <a href="#validity">
        <button class="btn btn-default">Validity</button>
    </a>
</div>

<div>
    <!-- some content here like <p></p> -->
    <a href="#rate">
        <button class="btn btn-default">Rate</button>
    </a>
</div>

<!-- content appear here -->
<div id="info">
    <!-- put some content here following click and selected option change -->
</div>

$( "#foo" ).bind( "mouseenter mouseleave", function() {
  $( this ).toggleClass( "entered" );
});

---

您可以使用以下代码捕获整个页面上的触发器单击事件，然后编写所需的代码以执行：

 $('body').bind('click',function(){
//your code here
});

---

如果我理解正确，您希望将同一事件附加到多个元素，如果是，可以使用逗号分隔符

，

：

$('body').on('click','#isProduction, .getState, button.my-btn',function(){
    var infoDiv = $('#info');

    $.ajax({
        type: "GET",
        url: window.location.href,
        data: {
          state: $(this).attr("id"),
        },
        success: function(html){
            infoDiv.empty();
            var newinfoDiv = $(html).find('#info');
            infoDiv.append(newinfoDiv);
            infoDiv = newinfoDiv;
        }
    });
})

注意：如果您可以为这两个按钮添加一个类，那么您可以将事件仅附加到它们

按钮。我的btn

而不是将其附加到

按钮

，这样不会感染其他按钮，请单击事件

<button class="btn btn-default my-btn">Validity</button>
<button class="btn btn-default my-btn">Rate</button>

希望这有帮助

$（'body'）。on（'click'，'getState，button.my btn'，myAction）；
$（'body'）。on（'change'，'isProduction'，myAction）；
函数myAction（）{
警报（“我的行动”）；
}

类型
生产
非生产