根据选择器编号切换元素

Question

我知道有更好的方法来做到这一点！

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

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

...等等。希望有人能帮我解决这个问题。

Answer 1

如果您可以更改 html，请使用常见的 class 和数据-* 属性，例如

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

也可以

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

Answer 3

最好使用 ID 而不是 class 属性，但这应该有效

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

根据选择器编号切换元素

Toggle elements based on selector number

jquery

selector