jQuery使用多个div激活相同的按钮，相同的布局

Question

我正在开发一个切换功能，用来替换动态生成的html的按钮。我想让按钮替换掉取消选择和选择按钮，但我遇到了一个问题，因为重复的按钮名称。

下面是我的代码：

​

$(document).on('click', '#select-image', function() {
    $('#deselect-image').show();
    $('#select-image').hide();
});
$(document).on('click', '#deselect-image', function() {
    $('#select-image').show();
    $('#deselect-image').hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="190" class="image-flex">
    <img src="https://material.angular.io/assets/img/examples/shiba2.jpg" style="width:100px;height:100px;"><br>
    <span id="select-toggle">
        <button id="deselect-image" style="display:none;">Deselect</button>
        <button id="select-image">Select</button>
    </span>&nbsp;<button id="remove-image">X</button>
</div>
<div id="191" class="image-flex">
    <img src="https://material.angular.io/assets/img/examples/shiba2.jpg" style="width:100px;height:100px;"><br>
    <span id="select-toggle">
        <button id="deselect-image" style="display:none;">Deselect</button>
        <button id="select-image">Select</button>
    </span>&nbsp;<button id="remove-image">X</button>
</div>      
<div id="192" class="image-flex">
    <img src="https://material.angular.io/assets/img/examples/shiba2.jpg" style="width:100px;height:100px;"><br>
    <span id="select-toggle">
        <button id="deselect-image" style="display:none;">Deselect</button>
        <button id="select-image">Select</button>
    </span>&nbsp;<button id="remove-image">X</button>
</div>

​

Answer 1

一种可能的方法是使用class属性而不是id，这样您就可以以更通用的方式使用按钮元素。

在下面的示例中，已经将deselect-image和select-image设置为与按钮一起使用的类。jQuery处理已修改，以便同一类的每个按钮都有一个处理程序。

由于这些按钮首先与deselect-button成对出现，因此prev()和next()函数会根据所单击的是哪个按钮来引用相反的按钮。

尝试下面的runnable示例。

​

$('.deselect-image').on('click', function() {
    $(this).next().show(); // the select-image button
    $(this).hide();
});

$('.select-image').on('click', function() {
    $(this).prev().show(); // the deselect-image button
    $(this).hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="190" class="image-flex">
    <img src="uploads/img/AJ/a.jpg" style="width:100px;height:100px;"><br>
    <span id="select-toggle">
        <button class="deselect-image" style="display:none;">Deselect</button>
        <button class="select-image">Select</button>
    </span>&nbsp;<button id="remove-image">X</button>
</div>
<div id="191" class="image-flex">
    <img src="uploads/img/AJ/b90.jpg" style="width:100px;height:100px;"><br>
    <span id="select-toggle">
        <button class="deselect-image" style="display:none;">Deselect</button>
        <button class="select-image">Select</button>
    </span>&nbsp;<button id="remove-image">X</button>
</div>      
<div id="192" class="image-flex">
    <img src="uploads/img/AJ/c.jpg" style="width:100px;height:100px;"><br>
    <span id="select-toggle">
        <button class="deselect-image" style="display:none;">Deselect</button>
        <button class="select-image">Select</button>
    </span>&nbsp;<button id="remove-image">X</button>
</div>

​