2

我有动态创建的项目和按钮，我想通过使用 jquery 设置它们的样式来向用户展示正在发生的事情（我正在使用 AJAX）。每个项目如下所示：

<li class="items">
<div class="itemheading">
<div class="controls"> 
    <span class="votes">1</span>
    <form class="actions" method="POST">
        <input type="submit" class="button plus" value="+1" data-plus="123">
    </form>
    <form class="actions" method="POST">
        <input type="submit" class="button minus" value="-1" data-minus="123">
    </form>  
    <form class="actions" method="POST">
        <input type="submit" class="button delete" value="X" data-del="123">
    </form></div><span class="title">Item title</span>
</div>
<span class="infotext">Item Description</span>
</li>

单击按钮时，我希望更新项目的样式。例如，如果单击 +1 按钮，则项目边框应淡化为绿色，然后在几秒钟内淡出至无，以表明该项目已被投票。

到目前为止，我想到的是以下内容：

$(".plus").live('click', function() {
 $(this).css("background", "#fff");

但这不起作用。我想我可以$(this)用来引用被点击的按钮，因为我已经在使用它来获取按钮的 data-tag 值：

var plus = $(this).data('plus');

另一个问题是，即使它确实有效，它也会设置按钮边框的样式，我需要以某种方式设置<div class="itemheading">. 我只能说 .itemheading 元素的样式，但由于我将拥有该类的多个项目，因此我需要找到另一种方法。也许有一种方法可以引用元素的父元素，然后我可以得到它的父元素？

谢谢。非常感谢任何帮助。

更新： 所以人们可以看到代码的工作原理。

$(".plus").live('click', function() {
 $(this).parents(".itemheading").css("background", "#000");
});​
4

2 回答 2

1

这是一个工作示例，不确定这是否是您所说的，但是在单击 +1 按钮后，带有 class .itemheading 的 class 的父元素会闪烁黑色。

示例 - http://jsfiddle.net/yZmrz/

于 2012-07-18T12:30:39.903 回答
1

2个问题，

小问题是 .live 已被弃用，使用 .on 代替http://api.jquery.com/on/

主要问题，您提到这些按钮是动态添加的，所以我猜您在创建元素之前绑定了 .live 事件。并且绑定仅适用于已经存在的元素。

要解决此问题，您应该将事件本身绑定到始终存在的父元素上，以处理对其子元素的点击。像这样：

$('.parent').on('click', '.plus', function(){
    $(this).css({background: "black"});
});

这样做的目的是确保每次单击 .plus 元素（它是 .parent 的后代）都会触发该函数，而不管它是何时创建的。

至于确保仅将更改应用于相关元素而不是所有元素，请使用遍历（http://api.jquery.com/category/traversing/）

traversing means that you can access elements by saying where they are relative to $(this). so that $(this).siblings('.myClass') will only select .myClass elements who are in the same element as $(this)

于 2012-07-18T12:34:34.173 回答