如何一键运行所有功能

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在不冒泡的情况下触发事件：

/*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");
});
});

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

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 中注入额外的<div class="clickn" data-color="#ff0"><button>clickn</button></div>元素时，您无需再次注册侦听器。
• 在内存中只创建一个函数对象。

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