Question

这可能又是一个简单的问题，但我花了相当多的时间来解决这个问题，所以如果你能帮助我，我会非常感激。

我有一个脚本可以生成某个组的申请人列表。每个申请人都有他/她自己的小名片＆＃34;有一些关于他或她的简明信息。名片上还有两个按钮; 1将候选人列入候选名单，1人拒绝申请。现在的问题是，一旦你点击一个短名单按钮，jquery代码就会在列表中的所有按钮上运行。这是有道理的，因为它们都是同一个类（button15），因为它是在PHP变量中生成的。此外，它不会添加所选的一个，而是列入候选名单的最低候选者。

我想知道的是当我点击一个按钮时如何阻止运行代码的所有按钮？以下是产生此事故的代码：

$(document).ready(function() {
    $('.button15').click(function(e) {
        $.ajax({
            type : "POST",
            url  : "shortlist.php?u=<?php echo $_applicant;?>&n=<?php echo $_name;?>&h=<?php echo $_colhead; ?>",
            data : "dataString",
            beforeSend : function() {
                var exhtml = $('.msg').html();
                $('.msg').html("<img src='../Images/animated gif tapebar.gif'/>").delay(1000);
            },
            success : function(html){
                var responsetext = "<?php echo $_applicant;?> has been added to the shortlist.";
                $('.button15').fadeOut("slow");
                $('.button14').fadeOut("slow");
                $('.msg').html(responsetext).delay( 800 ).fadeIn("slow");

            }
        });
    });
});

非常感谢任何帮助。提前谢谢！

修改

这是更正后的代码：

$(document).ready(function() {
    $('.button15').click(function(e) {
        var self = this;
        var a = ($(this).attr('id'));
        $.ajax({
            type : "POST",
            url  : "shortlist.php?u=" + a + "&n=<?php echo $_name;?>&h=<?php echo $_colhead; ?>",
            data : "dataString",
            beforeSend : function() {
                var exhtml = $('.msg').html();
                $(self).siblings('.msg').html("<img src='http://files.domain.com/Images/animated gif tapebar.gif'/>").delay(1000);
            },
            success : function(html){
                var responsetext = "You have successfully added " + a + " to the shortlist.";
                $(self).fadeOut("slow");
                $('.button14').fadeOut("slow");
                $(self).siblings('.msg').html(responsetext).fadeIn("slow");
            }

        });
    });
});

Answer 1

如果我理解正确你想要只对当前元素采取行动，那么你正在淡化所有button15元素。

尝试引用当前元素，如：

var self = this;

并在成功函数中使用它：

$(document).ready(function() {
    $('.button15').click(function(e) {
        var self = this;
        $.ajax({
            type : "POST",
            url  : "shortlist.php?u=<?php echo $_applicant;?>&n=<?php echo $_name;?>&h=<?php echo $_colhead; ?>",
            data : "dataString",
            beforeSend : function() {
                var exhtml = $('.msg').html();
                $(self).siblings('.msg').html("<img src='../Images/animated gif tapebar.gif'/>").delay(1000);
            },
            success : function(html){
                var responsetext = "<?php echo $_applicant;?> has been added to the shortlist.";
                $('.button15').fadeOut("slow");
                $('.button14').fadeOut("slow");
                $(self).siblings('.msg').html(responsetext).delay( 800 ).fadeIn("slow");
            }
        });
    });
});

但我不知道button14和msg元素是什么......我认为它们也与当前元素相关联......

修改

而不是更改所有msg元素只使用$(self).siblings('.msg')查找当前元素的兄弟;答案中的代码也相应改变了。

Answer 2

您好我认为您的问题不在于Jquery，而在于您的

url  : "shortlist.php?u=<?php echo $_applicant;?>&n=<?php echo $_name;?>&h=<?php echo $_colhead; ?>"

单击$ _ apply，$ _name和$ _colhead中的值对于所有按钮都相同无关紧要。

另外，

$('.button15').fadeOut("slow");
$('.button14').fadeOut("slow");

将淡出所有按钮15和14

做你想做的事的一种方法是

将申请人，姓名和ColHead保存到每个申请人的隐藏字段中。为这些字段提供唯一ID。示例Applicant_1 =“Bob”，Applicant_2 =“Jane”
每个Accept按钮也有一个唯一的ID（例如：1）
在您的Click事件中。获取按钮的ID并查找Applicant_ + id。
使用正确的数据执行Ajax。

Answer 3

根据您对我的问题的评论，并假设一个名为msg的元素对应于每个按钮，我相信罪魁祸首是这两行：

                $('.msg').html("<img src='../Images/animated gif tapebar.gif'/>").delay(1000);

                $('.msg').html(responsetext).delay( 800 ).fadeIn("slow");

在这两种情况下，请尝试将$('.msg')更改为$(this).find('.msg')。基本上，我认为代码的其余部分很好，你的选择器对于.msg元素来说过于笼统。

如何防止具有相同类的按钮与jquery同时执行

3 个答案:

修改