Question

我想帮助解决这个问题我想一键运行所有功能我该怎么做

是jquery的代码

 /*global $*/
    $(function () {
        'use strict';
        $(".click1 button").on("click", function click1() {
            $(this).parent(".click1").css("background-color", "#f00");
        });

        $(".click2 button").on("click", function click2() {
            $(this).parent(".click2").css("background-color", "#ff0");
        });

        $(".click3 button").on("click", function click3() {
            $(this).parent(".click3").css("background-color", "#f0f");
        });

        $("clickAll").on("click", function () {

            click1();
            click2();
            click3();
        });
    });

Answer 1

您可以使用trigger功能。

 /*global $*/
    $(function () {
        'use strict';
        $(".click1 button").on("click", function click1() {
            $(this).parent(".click1").css("background-color", "#f00");
        });

        $(".click2 button").on("click", function click2() {
            $(this).parent(".click2").css("background-color", "#ff0");
        });

        $(".click3 button").on("click", function click3() {
            $(this).parent(".click3").css("background-color", "#f0f");
        });

        $("clickAll").on("click", function () {                
            $(".click1 button").trigger("click");
            $(".click2 button").trigger("click");
            $(".click3 button").trigger("click");
        });
    });

Answer 2

使用.triggerHandler在不冒泡的情况下触发事件：

＆＃13;

/*global $*/
$(function() {
  'use strict';
  var clickMe = function(event, parent, bgColor) {
    $(event.target).parent(parent).css("background-color", bgColor);
  };

  var $click1Button = $(".click1 button");
  $click1Button.on("click", function(event) {
    clickMe(event, ".click1", "#f00");
  });

  var $click2Button = $(".click2 button");
  $click2Button.on("click", function(event) {
    clickMe(event, ".click2", "#ff0");
  });

  var $click3Button = $(".click3 button");
  $click3Button.on("click", function(event) {
    clickMe(event, ".click3", "#f0f");
  });

  $(".clickAll").on("click", function() {
    $click1Button.triggerHandler("click");
    $click2Button.triggerHandler("click");
    $click3Button.triggerHandler("click");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click1"><button>click1</button></div>
<div class="click2"><button>click2</button></div>
<div class="click3"><button>click3</button></div>

<div class="clickAll"><button>clickAll</button></div>

＆＃13;

Answer 3

由于每个处理程序中执行的代码略有相同，因此您可以使用事件委派来减少所需的代码并移动与html标记中的视图相关的代码。

  $(function(){
      $("#common_ancestor").on('click', function (evt){
          let $button = $(evt.target)
            // Depending on your markup, you way use closest() or parents() instead of parent() here.
            , $parent = $button.parent()
            , clickSelector = '[class*="click"]'
            ;
          // Test which button was triggered based on its parent
          if ($parent.is('.clickAll')) {
             $(this).find(clickSelector).each(function() {
                 this.style.backgroundColor = $(this).data('color');
             })
          } else if ($parent.is(clickSelector)) {
             $parent[0].style.backgroundColor = $parent.data('color');
          }
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="common_ancestor">
  <div class="click1" data-color="#f00"><button>click1</button></div>
  <div class="click2" data-color="#ff0"><button>click2</button></div>
  <div class="click3" data-color="#f0f"><button>click3</button></div>
   <div class="clickAll"><button>clickAll</button></div>
</div>

使用事件委托的优点：

在“#common_ancestor”div中注入extranal <div class="clickn" data-color="#ff0"><button>clickn</button></div>元素时，不需要再次注册侦听器。
在内存中只创建了一个函数对象。

缺点： - 如果你有非平凡的行为或代码在targes之间略有不同，你的uniq处理程序可能会很快变得臃肿，这可能会长期影响代码的可读性。

如何一键运行所有功能

3 个答案: