如何获得选择器的零件名称？

Question

<div id="reply1"></div>
<div id="reply5"></div>
<div id="reply20"></div>
<div id="reply26"></div>
<div id="reply52"></div>
<div id="reply61"></div>

<div id="button1"></div>
<div id="button5"></div>
<div id="button20"></div>
<div id="button26"></div>
<div id="button52"></div>
<div id="button61"></div>

我想做的是：点击button1，切换div1；单击 button52，切换 div52.

  $('#button1').click( function(){
         $('#reply_div1').toggle();
    });
  $('#button52').click( function(){
         $('#reply_div52').toggle();
    });

如何将数字传递给 div 选择器？我现在正在使用循环。有简单的方法吗？谢谢

Answer 1

如果您的所有元素共享相同的 id 属性开头，那么您可以使用 attribute selector 和 begin-with ^=比较器。
那么你只需要将这个id的button部分替换成reply就可以得到对应的“回复”的id .

// a single delegated event
$(document).on('click', '[id^=button]', evt => {
  const evt_target = evt.currentTarget; // "<div id="button..."
  const index = evt_target.id.replace('button', ''); // "..."
  const btn_target = $('#reply' + index);
  btn_target.addClass('clicked');
});

div[id^="button"]::after {
  content: "click me";
}

.clicked::after {
  content: "clicked";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="reply1">1</div>
<div id="reply5">2</div>
<div id="reply20">3</div>
<div id="reply26">4</div>
<div id="reply52">5</div>
<div id="reply61">6</div>

<div id="button1">1</div>
<div id="button5">2</div>
<div id="button20">3</div>
<div id="button26">5</div>
<div id="button52">5</div>
<div id="button61">6</div>

Answer 2

您可以创建一个数组并循环遍历它。
jQuery 选择器只是一个字符串，您可以按如下方式连接它：

var numbers= ["1", "5", "20", "26", "52", "61"];

for (i = 0; i < numbers.length; i++) 
{
    $('#button' + numbers[i]).click( function(){
         $('#reply_div' + numbers[i]).toggle();
    });
}

Answer 3

向按钮添加一个通用 class 和一个数据目标属性，我们可以为此编写一个函数。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $('.button').click( function(){
         var target = $(this).attr('data-target');
         $('#' + target).toggle();
    });
});
</script>
</head>
<body>

<div id="reply1">r1</div>
<div id="reply5">r2</div>
<div id="reply20">r3</div>
<div id="reply26">r4</div>
<div id="reply52">r5</div>
<div id="reply61">r6</div>

<div id="button1" class="button" data-target= "reply1">b1</div>
<div id="button5" class="button" data-target= "reply5">b2</div>
<div id="button20" class="button" data-target= "reply20">b3</div>
<div id="button26" class="button" data-target= "reply26">b4</div>
<div id="button52" class="button" data-target= "repl52">b5</div>
<div id="button61" class="button" data-target= "reply61">b6</div>

</body>
</html>

Answer 4

我对你的代码做了一些修改。希望这有帮助。

$(document).ready(function() {

  $('button.my_button').click( function(){
         const idName = '#reply' + this.id.replace('button', '');
         console.log(idName);
         $(idName).toggle();
    });
});

div {
padding: 5px;
margin: 5px 0;
background-color: red;
color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="reply1">reply1</div>
<div id="reply5">reply5</div>
<div id="reply20">reply20</div>
<div id="reply26">reply26</div>
<div id="reply52">reply52</div>
<div id="reply61">reply161</div>

<button class="my_button" id="button1">Button 1</button>
<button class="my_button" id="button5">Button 5</button>
<button class="my_button" id="button20">Button 20</button>
<button class="my_button" id="button26">Button 26</button>
<button class="my_button" id="button52">Button 52</button>
<button class="my_button" id="button61">Button 61</button>

如何获得选择器的零件名称？

How can get selector's part name?

jquery

selector