0

我有一系列由 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所示，但是由于按钮是由 PHP 脚本自动生成的（即我可以有未定义数量的按钮），我正在寻找一种方法来自动化 javascript 代码，以便每个按钮 id ="confirmation- aCertainString " 触发相应 div id="confirmdelete- aCertainString " 的淡入。

预先感谢您的帮助

4

4 回答 4

2

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

$(document).ready(
    function() {
        $('[id^="confirmdelete-"]').click(function() {
            $('#confirmation-'+$(this).attr('id').replace('confirmdelete-','')).fadeToggle();
        });
});
于 2013-04-09T16:34:49.163 回答
1

您可以选择带有input[type="button"]或的按钮input[value="Delete"]（更具体地说）。或者例如为按钮分配一个类delete并使用$('.delete')单击事件。

然后next用来获取对应的div。所以你甚至不需要aCertainString部分。

$(document).ready( function() {
        $('input[type="button"]').click(function() {
            $(this).next().fadeToggle();
        });
});

看看小提琴。

于 2013-04-09T15:36:02.503 回答
0

在按钮中使用 FAKE 类，

<input id="btnDelete1" type="button" class="btnDelete" value="Delete">

通过假类选择按钮，然后为每个按钮设置单击事件和淡化 div，但您的 div 的 id 必须像这样 SomeName + ButtonId。

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

显示 div 的方式是这样的：

$(document).ready(function(){
    $(".btnDelete").each(function(){}).click(function(){
        $("#confirmation-" + this.id.toString()).fadeToggle();
        });
    });
});
于 2013-04-09T15:47:23.487 回答
0

没有任何 id 的另一种方法是使用容器类，例如div.fruit-container

html

<div class="fruit-container">
    <div>Do you really want to delete this apple?</div>
    <button>Delete</button>
</div>

<div class="fruit-container">
    <div>Do you really want to delete this orange?</div>
    <button>Delete</button>
</div>

<div class="fruit-container">
    <div>Do you really want to delete this pear?</div>
    <button>Delete</button>
</div>

jQuery

$('div.fruit-container').find('button').on('click', function() {
   $(this).parent().find('div').fadeToggle();
});

http://jsfiddle.net/gavinbruce/CWsu7/

于 2013-04-09T17:06:44.457 回答