Объектно-ориентированный вопрос jQuery

Question

$("#e1").click(function() {
  $("#descriptions div").removeClass("show");
  $("#e1d").addClass("show");
});

$("#e2").click(function() {
  $("#descriptions div").removeClass("show");
  $("#e2d").addClass("show");
});


<div id="descriptions">

<div id="e1"></div>
<div id="e1d" class="description"></div>

<div id="e2"></div>
<div id="e2d" class="description"></div>

</div>

Я пытаюсь найти способ не повторять код, чтобы jQuery автоматически искал и связывал div. Так что было бы замечательно связать каждый идентификатор с именем e1 ~ ∞ с e1 ~ ∞d. Не уверен, как реализовать правильную объектно-ориентированную методологию. Спасибо за чтение!

Answer 1

Дайте своим элементам классы, а затем ссылайтесь на них в jQuery через имя класса:

<div id="descriptions">

<div id="e1" class="trigger"></div>
<div id="e1d" class="description"></div>

<div id="e2" class="trigger"></div>
<div id="e2d" class="description"></div>

</div>


$(".trigger").click(function() {
      $('#descriptions>div').removeClass("show");
      $(this)
      .next("div.description")
      .addClass("show");
});

Все, что сказано, похоже, что вы хотите показать / скрыть div. Возможно, вы захотите посмотреть на «переключение» JQuery для этого.

Answer 2

Примерно так может работать:

$("id^='e'").click(function() {
    $("#descriptions div").removeClass("show");
    $("#" + $(this).attr("id") + "d").addClass("show");
});

Выражение "id ^ = 'e'" выбирает все элементы, для которых идентификатор начинается с e. Так что, как вы видите, e1 не очень хорошее имя ... Скорее, возьмем что-нибудь более наглядное.

Но еще сильнее, если e ссылается на несколько элементов, почему бы вам не сделать имя класса e таким, как оно?

<div id="descriptions">
    <div id="e1" class="e"></div>
    <div id="e1d" class="description"></div>

    <div id="e2" class="e"></div>
    <div id="e2d" class="description"></div>
</div>

Тогда jQuery легче читать и понимать.

Answer 3

вы можете определить свою функцию для объекта jQuery, чтобы справиться с этим.

$.fn.toggleShow = function(){
     $("#descriptions div").removeClass("show");
     $("#" + $(this).attr('id') + "d").addClass("show");  
}

$("#e1").click(function(){
     $(this).toggleShow();
});

Answer 4

Вы можете использовать jQuery Regex Filter и использовать простое регулярное выражение для привязки события click. Хотя я бы использовал разные идентификаторы, которые позволили бы ответить Павлу.