页面有多个id=btn，现在只有第一个有效？

Question

页面有多个id=btn，现在只有第一个有效。
我希望都有效，但又不给每个btn不同名字（因为很难），能实现吗？
谢谢。

<span id=btn>1</span>
<span id=btn>2</span>
<span id=btn>3</span>
<div id="popup">内容简介</div>
<script type="text/javascript">
$("#btn").on("click", function(e){
    $("#popup").show();

    $(document).one("click", function(){
        $("#popup").hide();
    });

    e.stopPropagation();
});
$("#popup").on("click", function(e){
    e.stopPropagation();
});
</script>

Answer 1

ID 选择器会使用一次，而且仅一次。

因为ID选择器就是唯一的，如果需要多个，那么请使用Class选择器，
所以把使用 id 改换成使用 class 所以调整成如下方式即可：

<span class="btn">1</span>
<span class="btn">2</span>
<span class="btn">3</span>
<div id="popup">内容简介</div>
<script type="text/javascript">
$(".btn").on("click", function(e){
    $("#popup").show();

    $(document).one("click", function(){
        $("#popup").hide();
    });

    e.stopPropagation();
});
$("#popup").on("click", function(e){
    e.stopPropagation();
});
</script>

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

<span id=btn>1</span>
<span id=btn>2</span>
<span id=btn>3</span>
<div id="popup">内容简介</div>
<script type="text/javascript">
$("[id=btn]").on("click", function(e){
    $("#popup").show();

    $(document).one("click", function(){
        $("#popup").hide();
    });

    e.stopPropagation();
});
$("#popup").on("click", function(e){
    e.stopPropagation();
});
</script>

将$("#btn") 改成 $("[id=btn]")