如何将不同的 css 类选择器组合到一个 javascript 行中？

Question

如何将这段代码简化为一行（js 语句）？     <script>$(".div2").click(function() {window.location = $(this).find("a").attr("href"); return false;});</script>     <script>$(".div3").click(function() {window.location = $(this).find("a").attr("href"); return false;});</script>     <script>$(".div4").click(function() {window.location = $(this).find("a").attr("href"); return false;});</script>     <script>$(".div5").click(function() {window.location = $(this).find("a").attr("href"); return false;});</script>     <script>$(".div6").click(function() {window.location = $(this).find("a").attr("href"); return false;});</script>     <script>$(".div7").click(function() {window.location = $(this).find("a").attr("href"); return false;});</script>     <script>$(".div8").click(function() {window.location = $(this).find("a").attr("href"); return false;});</script>     <script>$(".div9").click(function() {window.location = $(this).find("a").attr("href"); return false;});</script>

Answer 1

您可以将其缩短为如下所示：

$(".div2,.div3,.div4,.div5,.div6,.div7,.div8,.div9").click(function() {

  window.location = $(this).find("a").attr("href");

  return false;

});

也没有必要使用多个<script>标签，1个就够了。

Answer 2

两个答案：

选择器组

您可以使用选择器组：

$(".div2, .div3, .div4, .div5, .div6, .div7, .div8, .div9")..click(function() {

    window.location = $(this).find("a").attr("href");

    return false;

});

选择器组是一系列中间有逗号的选择器。它选择匹配组中任何选择器的元素。

事件委托

您可以添加一个处理程序，而不是向所有这些 div 添加一个处理程序，该处理程序document仅在点击通过这些 div 之一时才采取行动：

$(document).on("click", ".div2, .div3, .div4, .div5, .div6, .div7, .div8, .div9", function() {

    window.location = $(this).find("a").attr("href");

    return false;

});

即使您有多个语句，也没有理由不能将它们放在一个中script：

<script>

doThis();

doThat();

doTheOther();

</script>

Answer 3

为元素添加一个公共类，如下所示。

<div class="div2 my-class"> ... </div>

<div class="div3 my-class"> ... </div>

<div class="div3 my-class"> ... </div>

<div class="div4 my-class"> ... </div>

<div class="div5 my-class"> ... </div>

<div class="div6 my-class"> ... </div>

<div class="div7 my-class"> ... </div>

<div class="div8 my-class"> ... </div>

将事件侦听器添加到该公共类

$(".my-class").click(function() {

  window.location = $(this).find("a").attr("href");

  return false;

});