如何將不同的 css class 選擇器組合成一條 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;
});

選擇器組是一系列中間有逗號的選擇器。 它選擇與組中任何選擇器匹配的元素。

事件委托

您可以向document中添加一個處理程序，而不是向所有這些 div 添加一個處理程序，該處理程序僅在單擊通過這些 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

給元素添加一個普通的class，如下。

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

將事件偵聽器添加到該公共 class

$(".my-class").click(function() {
  window.location = $(this).find("a").attr("href");
  return false;
});