Как я могу уменьшить повторяемость этого jquery источника?

Question

   $("#sel1").click(function () {
    $("#itemed1").attr("src", "../img/tab_img_01_on.png");
    $("#itemed2").attr("src", "../img/tab_img_02.png");
    $("#itemed3").attr("src", "../img/tab_img_03.png");
    $("#itemed4").attr("src", "../img/tab_img_04.png");
    $(this).find("span").addClass("add");
    $("#sel2").find("span").removeClass("add");
    $("#sel3").find("span").removeClass("add");
    $("#sel4").find("span").removeClass("add");
});
$("#sel2").click(function () {
    $("#itemed2").attr("src", "../img/tab_img_02_on.png");
    $("#itemed1").attr("src", "../img/tab_img_01.png");
    $("#itemed3").attr("src", "../img/tab_img_03.png");
    $("#itemed4").attr("src", "../img/tab_img_04.png");
    $(this).find("span").addClass("add");
    $("#sel1").find("span").removeClass("add");
    $("#sel3").find("span").removeClass("add");
    $("#sel4").find("span").removeClass("add");
});
$("#sel3").click(function () {
    $("#itemed3").attr("src", "../img/tab_img_03_on.png");
    $("#itemed1").attr("src", "../img/tab_img_01.png");
    $("#itemed2").attr("src", "../img/tab_img_02.png");
    $("#itemed4").attr("src", "../img/tab_img_04.png");
    $(this).find("span").addClass("add");
    $("#sel1").find("span").removeClass("add");
    $("#sel2").find("span").removeClass("add");
    $("#sel4").find("span").removeClass("add");
});
$("#sel4").click(function () {
    $("#itemed4").attr("src", "../img/tab_img_04_on.png");
    $("#itemed1").attr("src", "../img/tab_img_01.png");
    $("#itemed2").attr("src", "../img/tab_img_02.png");
    $("#itemed3").attr("src", "../img/tab_img_03.png");
    $(this).find("span").addClass("add");
    $("#sel1").find("span").removeClass("add");
    $("#sel2").find("span").removeClass("add");
    $("#sel3").find("span").removeClass("add");
});

Hello Этот JQuery код является источником, который изменяет изображение при нажатии на элемент. Это отлично работает, но у меня много итераций, поэтому я хочу уменьшить свой код. Что я должен использовать?

Answer 1

Вы можете использовать простую комбинацию селекторов.

См. Пример здесь или в CodePen :

$(".selector").click(function () {
    let index = $(this).data('index');
    $(".selector").find("span").removeClass("add");
    $(this).find("span").addClass("add");
  
    $(".imgs").each( function(){
      $(this).attr("src", `../img/tab_img_0${$(this).data('index')}.png`);
    });
 
    $(`.imgs[data-index="${index}"]`).attr("src", `../img/tab_img_0${index}_on.png`);
});

.add {
  font-size: 2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="selector" data-index="1">Sel 1 <span>sample</span></button>
<button class="selector" data-index="2">Sel 2 <span>sample</span></button>
<button class="selector" data-index="3">Sel 3 <span>sample</span></button>
<button class="selector" data-index="4">Sel 4 <span>sample</span></button>


<img data-index="1" class="imgs" />
<img data-index="2" class="imgs" />
<img data-index="3" class="imgs" />
<img data-index="4" class="imgs" />

Очевидно, что если вы используете n index > 10, вам следует использовать функцию padStart .

Answer 2

Расширяемая версия того же кода.

function pad(v) {
  return (v.length === 2 ? v : '0' + v);
}

$('[id^=sel]').click(function() {
  var total = 4;
  var idNumber = $(this).attr('id').match(/\d+/);

  for ( i = 1; i <= total; i++ ) {
    $('#itemed' + i).attr('src', '../img/tab_img_' + pad(i) + '.png');
    $('#sel' + i).find('span').removeClass('add');
  }

  $('#itemed' + idNumber).attr('src', '../img/tab_img_' + pad(idNumber) + '_on.png');
  $(this).find('span').addClass('add');
});

Но я думаю, что подход @SnakeDrak правильный

Answer 3

Пожалуйста, обратитесь ниже код.

$("[id^=sel]").on('click', function() {     
      var selectionID = ["sel1", "sel2", "sel3", "sel4"];
      var itemID = ["itemed1", "itemed2", "itemed3", "itemed4"];
      var selectedButton = $(this).attr("value");
      $(this).find("span").addClass("add");
      var indexID = selectionID.indexOf(selectedButton) + 1;
      $("#itemed" + indexID).attr("src", "../img/tab_img_0" + indexID + "_on.png");
      selectionID = selectionID.filter(e => e !== selectedButton);
      itemID = itemID.filter(e => e !== itemID[indexID - 1]);
      for (var i = 0; i < selectionID.length; i++) {
        $("#" + selectionID[i]).find("span").removeClass("add");
        $("#" + itemID[i]).attr("src", "../img/tab_img_0" + itemID[i].charAt(itemID[i].length - 1) + ".png");
      }

    });

.add {
      background: blue;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    <button value="sel1" id="sel1"><span>sel1</span></button><br/>
    <button value="sel2" id="sel2"><span>sel2</span></button><br/>
    <button value="sel3" id="sel3"><span>sel3</span></button><br/>
    <button value="sel4" id="sel4"><span>sel4</span></button><br/>

    <img src="" id="itemed1">  
    <img src="" id="itemed2">
    <img src="" id="itemed3">
    <img src="" id="itemed4">

Answer 4

Это будет работать для выбора с номером 9. Потребуется немного больше работы, чтобы заставить его работать с большими числами, чем 9

   $("[id^=sel]").click(function () {  // match every element where the id starts with "sel"
    var idNumber = $(this).attr('id').match(/\d+/); // get the number of given id
    // reset all src paths from all given elements
    $("#itemed1, #itemed2, #itemed3, #itemed4").attr("src", "../img/tab_img_01.png");

    // use the idNumber to concatenate the selector and set the src
    $("#itemed" + idNumber).attr("src", "../img/tab_img_0"+idNumber+"_on.png");

    // remove the add class to all given elements
    $("#sel1, #sel2, #sel3, #sel4").find("span").removeClass("add");

    // add the "add" class to $(this) element
    $(this).find("span").addClass("add");
});