如何将不同的 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() {&nbsp; window.location = $(this).find("a").attr("href");&nbsp; return false;});也没有必要使用多个<script>标签，1个就够了。

Answer 2

两个答案：选择器组您可以使用选择器组：$(".div2, .div3, .div4, .div5, .div6, .div7, .div8, .div9")..click(function() {&nbsp; &nbsp; window.location = $(this).find("a").attr("href");&nbsp; &nbsp; return false;});选择器组是一系列中间有逗号的选择器。它选择匹配组中任何选择器的元素。事件委托您可以添加一个处理程序，而不是向所有这些 div 添加一个处理程序，该处理程序document仅在点击通过这些 div 之一时才采取行动：$(document).on("click", ".div2, .div3, .div4, .div5, .div6, .div7, .div8, .div9", function() {&nbsp; &nbsp; window.location = $(this).find("a").attr("href");&nbsp; &nbsp; 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() {&nbsp; window.location = $(this).find("a").attr("href");&nbsp; return false;});