Есть ли лучший способ написать этот простой сценарий на клик?

Как вы можете она есть последовательный номер в каждом блоке. вместо дублирования еще 10 раз для 10 различных элементов списка, есть ли лучший способ?

Содержание не в детстве ли. так что я не могу клубить их всех (это)

Вот вещь, над которой я работаю:

$( '.artist_li1' ).click(function() {
    $( '.artist_content' ).removeClass( "active" );
    $( '.artist_content1' ).addClass( "active" );
}); 

$( '.artist_li2' ).click(function() {
    $( '.artist_content' ).removeClass( "active" );
    $( '.artist_content2' ).addClass( "active" );
}); 

$( '.artist_li3' ).click(function() {
    $( '.artist_content' ).removeClass( "active" );
    $( '.artist_content3' ).addClass.addClass( "active" );
}); 


and so on....
-1
wsgg 11 Дек 2016 в 17:39

3 ответа

Лучший ответ

Вы можете сделать для цикла:

for(var i = 1; i < 3; i++) {
    (function(index) {
        $( '.artist_li'+index ).click(function() {
            $( '.artist_content' ).removeClass( "active" );
            $( '.artist_content'+index ).addClass( "active" );
        });
    }(i));

} 
1
wsgg 11 Дек 2016 в 15:27

Чтобы дать лучший / более эффективный ответ, было бы полезно увидеть ваш HTML. Но я отвлекся и предложу следующее -

Предполагая некоторую структуру HTML следующим образом: вы можете избавиться от необходимости индексирования, если вы работаете, используя обход DOM относительно элемента, по которому щелкнули

$(document).on('click', '.artist_li', function(){
  $('.artist_content').removeClass('active');
  
  //this will find the child div inside the list element that
  //was just clicked. Removing the need for indexing
  $(this).children('.artist_content').addClass('active');
});
.active {
  color: red;
}

li {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul> <!-- Adding extra class artist_li to illustrate various method -->
  <li class="artist_li1 artist_li">
    <div class="artist_content artist_content1 active">Content 1</div>
  </li>
  <li class="artist_li1 artist_li">
    <div class="artist_content artist_content2">Content 2</div>
  </li>
  <li class="artist_li1 artist_li">
    <div class="artist_content artist_content3">Content 3</div>
  </li>
</ul>
0
Adjit 11 Дек 2016 в 15:01

Вы можете использовать ^ селектор атрибутов в jQuery следующим образом:

$( '[class^=artist_li]' ).click(function() {
    $( '.artist_content' ).removeClass( "active" );
    $( '.artist_content1' ).addClass( "active" );
});

[class^=artist_li] сопоставляет элементы с атрибутом класса, начинающимся с artist_li

  • ОБНОВЛЕНИЕ : используйте jQuery вместо $, так как согласно предоставленной ссылке вы используете jQuery v 1.12

Для получения дополнительной помощи см. Блок кода ниже

$(function(){

  $("[class^=artist_li]").on('click', function() {
    alert($(this).text());
  });

});
li {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li class="artist_li1">Click 1</li>
    <li class="artist_li2">Click 2</li>
    <li class="artist_li3">Click 3</li>
    <li class="artist_li4">Click 4</li>
  </ul>
</div>

Надеюсь это поможет!

2
Saumya Rastogi 11 Дек 2016 в 15:04