Question

我的页面上有2个元素，单击button1它应该隐藏，而当我单击块元素

时，背景颜色应该变为绿色..

<html>
    <head>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(document).ready(function(){
                $("#button1").click(function(){
                $(this).hide();
                });
            });
        </script>
    </head>
    <body>
        <button id="button1">Button1</button>
        <p>This is a block element</p>
    </body>
</html>

Answer 1

$(document).ready(function () {
    $("#button1").click(function () {
        $(this).hide();
    });
    $("p").click(function () {
        $(this).css('background-color', 'green');
    });
});

Answer 2

这很简单：您需要将Click事件处理程序与两个元素绑定。

<script>
  $(document).ready(function(){
      $("#button1").click(function(){
           $(this).hide();
      });

      $("p").click(function () {
        $(this).css('background-color', 'green');
     });
  });
</script>

Working Demo

或者你也可以这样做 -

$(document).ready(function(){
     $("#button1, p").click(function(e){
        if(e.target.nodeName === "BUTTON"){
           $(this).hide();
        }
        else if(e.target.nodeName === "P"){
          $(this).css('background-color', 'green');
        }
     });    
});

Working Example

对多个元素采取行动

2 个答案: