jquery - 单击按钮时的样式元素

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

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

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