Как объединить различные селекторы класса 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, который выполняет действие, только еслищелчок прошел через один из этих элементов:

$(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;
});