几个具有相同类名的元素，我只想更改我单击的那个

Question

我只想更改我单击的类的背景图像，但应用了 5 次相同的类名。如果链接是“隐藏”，我希望箭头指向上方，如果链接是“显示”，我希望箭头指向下方。这是我正在使用的 jQuery....

我将添加实际上隐藏 'tr's 的 jQuery 的前半部分

/* This script collapases and expands the portlet table */
$('table.summary_content_table tr.totalRow').click( function() {
$(this).nextAll('tr').each( function() {
if ($(this).hasClass('totalRow')) {
    return false;
}
    $(this).toggle(50);     
});

/* This script sets the link to say 'Hide' or 'Show' as appropriate */
if ($(this).find('td span.clickme').html()== ('Hide')) {
    $(this).find('td span.clickme').html('Show');
    **$(this).parent().next('.clickme')**.css('background-image', 'url(images/arrows/arrow-nav-down-slate.png)');
} else {
    $(this).find('td span.clickme').html('Hide');
    **$(this).parent().find('.clickme')**.css('background-image', 'url(images/arrows/arrow-nav-up-slate.png)');                         
}
});

这里是html表格.....

<table class="summary_content_table">
<tbody>
    <tr class="totalRow">
        <td colspan="2"><span class="clickme">Hide</span><strong>TEXT</strong></td>
        <td class="lt">0</td>
    </tr>
    <tr>
        <td  class="totalSubRow" colspan="2">text</td>
        <td class="lt">$0</td>
    </tr>
    <tr class="totalRow">
        <td colspan="2"><span class="clickme">Hide</span><strong>TEXT</strong></td>
        <td class="lt">0</td>
    </tr>
    <tr>
        <td  class="totalSubRow" colspan="2">text</td>
        <td class="lt">$0</td>
    </tr>
    <tr class="totalRow">
        <td colspan="2"><span class="clickme">Hide</span><strong>TEXT</strong></td>
        <td class="lt">0</td>
    </tr>
    <tr>
        <td  class="totalSubRow" colspan="2">text</td>
        <td class="lt">$0</td>
    </tr>
    <tr class="totalRow">
        <td colspan="2"><span class="clickme">Hide</span><strong>TEXT</strong></td>
        <td class="lt">0</td>
    </tr>
    <tr>
        <td  class="totalSubRow" colspan="2">text</td>
        <td class="lt">$0</td>
    </tr>
    <tr class="totalRow">
        <td colspan="2"><span class="clickme">Hide</span><strong>TEXT</strong></td>
        <td class="lt">0</td>    
    </tr>
    <tr>
        <td  class="totalSubRow" colspan="2">text</td>
        <td class="lt">$0</td>    
    </tr>      
  </tbody>
</table>

这里是css...

table.summary_content_table td span.clickme {
padding: 0 19px 0 0;
float: right;
font-weight: bold;
cursor: pointer;
background: `#FFF url(../images/arrows/arrow-nav-up-slate.png) no-repeat right;

}

我尝试了几种方法，包括我发现的 here 和 here，但我似乎无法挑出其中一个链接。当我点击它们时，所有的箭头都指向上方，如果我再次点击它，所有的箭头都指向下方。我只想要我点击的链接来更改背景图片。

感谢您的任何建议。

Answer 1

你真的应该使用 jQuery 的 delegate 方法，而不是将相同的处理函数绑定到每一行：

$('.summary_content_table').delegate('.totalRow', 'click', function() {
    var $clickme = $('.clickme', this);

    $(this).nextUntil('.totalRow').each(function() {
        $(this).toggle(50);
    });

    if ( $clickme.not(':contains("Show")').length ) {
        $clickme.text('Show')
            .css({backgroundImage: 'url(... v-down-slate.png)'});
    } else {
        $clickme.text('Hide')
            .css({backgroundImage: 'url(... v-up-slate.png)'});
    }
});