Question

在我看来，我有很多带有不同类别的标签和类似的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>

使用jQuery，我想抓住所有点击，这些标记的更改，更准确地说，如果用户点击<li></li> 标记并使用类.getState，或如果用户选择了<select></select> 标记的选项，其标识为#isProduction 或，如果用户点击了另一个<button></button> 标记 <a href="#validity">或<a href="#rate">。

就像这个例子：

<script type="text/javascript" charset="utf-8" defer>
    $('.getState').bind('click', function sortByState(){
        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;
            }
        });
    });
</script>

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

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

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

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

Answer 1

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

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

注意：如果您可以为这两个按钮添加一个类，那么您可以更好地将这两个按钮添加到button.my-btn，而不是将其附加到button，以便不会感染其他按钮点击事件。

<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);

function myAction(){
    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;
        }
    });
}

希望这有帮助。

$('body').on('click','.getState, button.my-btn',myAction);
$('body').on('change','#isProduction',myAction);

function myAction(){
  alert('myAction');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<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 my-btn">Validity</button>
  </a>
</div>

<div>
  <!-- some content here like <p></p> -->
  <a href="#rate">
    <button class="btn btn-default my-btn">Rate</button>
  </a>
</div>

<!-- content appear here -->
<div id="info">
  <!-- put some content here following click and selected option change -->
</div>

Answer 2

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

GET

在许多标记的点击事件中使用不同的ID或类

2 个答案: