Есть ли лучший способ написать этот javascript/jquery?

Question

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

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

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

Heres вещь им работать:

$('.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.... 

Answer 1

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

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

} 

Answer 2

Вы можете использовать ^ селектор атрибута в JQuery, как это:

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

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

• UPDATE: Используйте 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>

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

Answer 3

Чтобы лучше/более эффективный ответ было бы полезно, чтобы увидеть ваш 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>