Question

我有动态创建的项目和按钮，我想通过使用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)来引用被点击的按钮，因为我已经使用它来获取按钮的数据标记值：

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

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

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

更新，以便人们可以看到代码的作用。

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

Answer 1

这是一个有效的例子，不确定这是不是你的意思，但是在点击+1按钮后，类加上类.itemheading的父元素会闪烁黑色。

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

Answer 2

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/）

遍历意味着您可以通过说出它们相对于$（this）的位置来访问元素。所以$（this）.siblings（'。myClass'）只会选择与$（this）在同一元素中的.myClass元素

单击按钮时的样式元素

2 个答案: