javascript - 如何使用 jQuery 在单击相应按钮时淡入多个隐藏的 div？

Question

我有一系列由 PHP 脚本生成的 Web 按钮。每当用户单击这些按钮之一时，我希望使用 jQuery 使相应的隐藏按钮淡入淡出。

这是我的 HTML 代码

<div id="confirmation-apple" style="display:none;">
    Do you really want to delete this apple?
</div>
<input type="button" id="confirmdelete-pear" value="Delete" />
<div id="confirmation-pear" style="display:none;">
    Do you really want to delete this pear?
</div>

这是我的 javscript 代码

$(document).ready(
    function() {
        $("#confirmdelete-apple").click(function() {
            $("#confirmation-apple").fadeToggle();
        });
    });
$(document).ready(
    function() {
        $("#confirmdelete-pear").click(function() {
            $("#confirmation-pear").fadeToggle();
        });
    });

它们工作完美，如Fiddle I created所示，但是由于按钮是由 PHP 脚本自动生成的(即我可以有未定义数量的按钮)，我正在寻找一种方法来自动化 javascript 代码，以便每个按钮 id="confirmation-aCertainString”触发对应div id=“confirmdelete-aCertainString”的淡入。

预先感谢您的帮助

Answer 1

我认为你需要类似的东西 jsfiddle首先选择任何以“confirmdelete-”开头的id，然后在添加点击事件后，我们可以从其id属性中剪切所需的名称，例如“apple”，然后将其添加到“confirmation-”以使其淡出:

$(document).ready(
    function() {
        $('[id^="confirmdelete-"]').click(function() {
            $('#confirmation-'+$(this).attr('id').replace('confirmdelete-','')).fadeToggle();
        });
});