Jquery在具有相同类名的一组元素中选择单击的元素答案

【问题标题】：Jquery select clicked element within a set of elements with the same classnameJquery在具有相同类名的一组元素中选择单击的元素
【发布时间】：2013-06-22 18:40:59
【问题描述】：

也许你们可以帮我解决这个问题，过去 30 分钟我一直在努力解决这个问题。

假设我有四个具有相同类的元素。

<div class="test">hi</div>
<div class="test">hey</div>
<div class="test">yo</div>
<div class="test">What's up</div>

如何选择被点击的那个？

我能够让它像这样工作：

$('.test').click(function() {
    $(this).toggleClass("btn-danger btn-success");
});

但是，我需要它在 ajax 调用后触发而不被点击成功，所以我需要能够做这样的事情（失败的尝试）：

$('.test', this).toggleClass("btn-danger btn-success"); // This did not work

$(this).find('.test').toggleClass("btn-danger btn-success");  // Also did not work

有什么建议吗？非常感谢！！

【问题讨论】：

你如何确定哪个链接应该触发事件？
我之前遇到过类似的问题，我通过var self = this 解决了。也许它可以帮助你。
怎么知道ajax后需要点击哪个元素？？或者 ajax 调用是否与点击事件相关联，如果是这样，它会变得更容易
我是否认为 AJAX 调用将通过单击 div 进行？如果没有，您将需要以其他方式标记它们，例如使用唯一 ID 或类。
当我单击元素时，onclick 事件会触发 ajax，然后在成功时我需要选择并编辑被单击触发 ajax 调用的原始元素。我仍然不知道该怎么做。感谢您到目前为止的帮助。

标签： jquery class selector this

【解决方案1】：

听起来好像是在单击其中一个元素时进行了 ajax 调用，但是您需要根据单击的元素在 ajax 调用中传递不同的值。您可以执行以下操作，而不是使用“onclick”属性：

HTML：

<div class="test" data-param1="value1a" data-param2="value2a">hi</div>
<div class="test" data-param1="value1b" data-param2="value2b">hey</div>
<div class="test" data-param1="value1c" data-param2="value2c">yo</div>
<div class="test" data-param1="value1d" data-param2="value2d">What's up</div>

JavaScript：

$('.test').click(function() {
    var $div = $(this);
    $.ajax(url, {
        data: {
            param1: $div.attr('data-param1'),
            param2: $div.attr('data-param2')
        },
        success: function() {
            $div.toggleClass("btn-danger btn-success");
        }
    });
});

当然，您可以使用 PHP 变量设置 data- 属性的值。

【讨论】：

这对我有用。我之前不能使用此方法的唯一原因是我不知道如何将变量传递给我的 ajax 函数，如此处所述。 :) 非常感谢我修复了我的代码！

【解决方案2】：

使用触发功能....

所以附加点击处理程序...

$('.test').on('click', function() {
  $(this).toggleClass("btn-danger btn-success");
});

然后在你的 ajax 成功函数中......触发那个点击......

$('.test').trigger('click');

但要确定触发哪一个才是诀窍。

根据 ajax 怎么知道点击哪一个？？？？

如果您只是进行 ajax 调用，则根据您点击的链接，解决方案会简单得多.......因为您已经知道点击了哪个链接

$('.test').click(function() {
var link = $(this);
$.ajax(url, {
    success: function() {
        link.toggleClass("btn-danger btn-success");
     }
   });
});

【讨论】：

这看起来很有希望，我要试试这个，谢谢！
不幸的是，这个解决方案对我不起作用，因为我无法使用 $('.test').click(function() { 我必须使用 onclick 方法调用它因为我将动态 php 变量作为 ajax 函数的参数传递。
如果你只是发表你的意思......我可以帮助你......因为我确定触发器正是你需要的

【解决方案3】：

 $('.test').click(function(){
   clicked = $(this);
 });

上面的代码返回一个包含单个项目的数组。所以使用索引 0 来选择它，如下所示：

$('.test').click(function(){
  clicked = $(this)[0];
});

【讨论】：

【解决方案4】：

难道不能给每一个都一个 ID 以便您可以直接访问它们吗？

如果您在回调函数上触发它们，您可以在变量中创建对单击的 div 的引用吗？

即

 var clicked;

 $('.test').click(function(){
     clicked = $(this);
 });

然后在您的 ajax 响应中：

 clicked.toggleClass("btn-danger btn-success");

【讨论】：

这对我不起作用，因为 ajax 调用是在 div 的 onclick 上触发的。我必须使用 onclick，因为它传递了正在循环的 php 数组。