Jquery 多个元素具有相同的类名，我只想更改一个I'；我点击

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

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

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

}

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

---

谢谢您的建议。

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

$('.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)'});
    }
});

---

谢谢，让我调查一下“代表”。

$('.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)'});
    }
});