Переключающие элементы на основе номера селектора

Question

Я знаю, что есть лучший способ сделать это!

$('.press-125').click(function(){ 
    $('.fullpress-125').slideToggle(); 
}); 

$('.press-128').click(function(){ 
    $('.fullpress-128').slideToggle(); 
}); 

... и так далее. Надеюсь, кто-то может помочь мне понять это.

Answer 1

Если вы можете изменить HTML использовать общий класс и данных- * свойство, как

$('.press').click(function() { 
 
    $('.fullpress-' + $(this).data('id')).slideToggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="press" data-id="123">123</li> 
 
    <li class="press" data-id="125">125</li> 
 
    <li class="press" data-id="126">126</li> 
 
    <li class="press" data-id="127">127</li> 
 
    <li class="press" data-id="128">128</li> 
 
    </ul> 
 

 
<div class="fullpress-123">123</div> 
 
<div class="fullpress-125">125</div> 
 
<div class="fullpress-126">126</div> 
 
<div class="fullpress-127">127</div> 
 
<div class="fullpress-128">128</div>

Answer 2

Она также posiible

$('[class^=press]').click(function(){ 
    $('.fullpress-' + $(this.attr('class').split("-")[1])).slideToggle(); 
}); 

Answer 3

Это лучше, если вы используете идентификаторы вместо атрибута класса, но это должно работать

$("[class^='press-']").click(function(){ 
    var className = $(this).attr('class'); 
    $('.full'+className).slideToggle(); 
});