点击时，有几个具有相同类名的元素，我只想更改当前点击的那个。

9 浏览
0 Comments

点击时，有几个具有相同类名的元素，我只想更改当前点击的那个。

我想要更改我点击的类的背景图像，但是相同的类名被应用了5次。如果链接是“隐藏”，我希望箭头指向上方；如果链接是“显示”，我希望箭头指向下方。以下是我使用的jQuery代码...

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

/* 这个脚本折叠和展开 portlet 表格 */
$('table.summary_content_table tr.totalRow').click(function() {
  $(this).nextAll('tr').each(function() {
    if ($(this).hasClass('totalRow')) {
      return false;
    }
    $(this).toggle(50);
  });
  /* 这个脚本根据情况将链接设置为“隐藏”或“显示” */
  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表格...


  
    

      HideTEXT
      0
    

    

      text
      $0
    

    

      HideTEXT
      0
    

    

      text
      $0
    

    

      HideTEXT
      0
    

    

      text
      $0
    

    

      HideTEXT
      0
    

    

      text
      $0
    

    

      HideTEXT
      0
    

    

      text
      $0

这是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;
}

我尝试了几种方法，包括我在这里和这里找到的方法，但我似乎无法单独选择一个链接。当我点击它们时，所有箭头都指向上方；如果我再次点击它们，所有箭头都指向下方。我只想要点击的链接改变背景图像。

感谢任何建议。

0

1 答案

0 Comments

这个问题的出现原因是由于页面中有多个具有相同类名的元素，当点击其中一个元素时，希望仅仅改变被点击的元素。然而，使用普通的绑定方法会将相同类名的所有元素都绑定相同的处理函数，导致无法区分不同元素的点击事件。

为了解决这个问题，可以使用jQuery的delegate方法。delegate方法允许我们将事件处理程序绑定到父元素上，并通过选择器指定具体触发事件的子元素。这样一来，即使有多个具有相同类名的元素，也可以通过点击事件的冒泡机制，只触发被点击元素的事件处理函数。

下面是使用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)'});
    }
});

以上代码中，通过给父元素summary_content_table绑定click事件处理函数，并指定触发事件的子元素选择器'.totalRow'，来实现只改变被点击元素的效果。每次点击.totalRow元素时，会根据其下的子元素.clickme的内容进行判断，并根据判断结果修改文本和背景图。

通过使用delegate方法，我们可以避免绑定相同处理函数到每个具有相同类名的元素，而只需将事件处理程序绑定到父元素上，使代码更加简洁和高效。

0