Question

我一直试图让这个工作相当长一段时间。

我正在寻找一种方法来改变使用jquery在tr onclick中改变div的背景。

我的意思是当点击tr（由类命名）时，带有类名（在tr内）的div会改变颜色。

我遇到的问题是我可以使用指定的类名设置所有div的颜色，但不仅仅是我点击它的tr的颜色。

我认为代码看起来像这样：

   $('.backpack_row').click( function(){
  if ($(this).css('background-color') != 'rgb(255, 255, 204)')
  {
      $(this .divClassname).css('background-color', '#000000');
      $(this).css('background-color', '#ffffcc');
  }
  else
  {
      $(this).css('background-color', '#ffffff');
      $(this .divClassname).css('background-color', '#ffffff');
  }

}）;

这是HTML：

<table>
    <tr class="backpack_row"><td><div class="divClassname"></div></td><td>Other Stuff</td><td></td></tr>
</table>

谢谢，伊恩

Answer 1

修正了你的代码。 JQuery选择器调用应采用以下格式：

$("selector")
$("selector", context)（在这种情况下，上下文为this）

   $('.backpack_row').click( function(){
  if ($(this).css('background-color') != 'rgb(255, 255, 204)')
  {
      $(".divClassname", this).css('background-color', '#000000');
      $(this).css('background-color', '#ffffcc');
  }
  else
  {
      $(this).css('background-color', '#ffffff');
      $(".divClassname", this).css('background-color', '#ffffff');
  }

Answer 2

你的选择器有点偏，你自己也在努力。而不是检查背景颜色，检查类存在：

$(".backpack_row").click(function () {
    if (!$(this).hasClass("highlighted")) {
        $(this).find(".divClassname").addClass("divHighlighted");
        $(this).addClass("highlighted");
    } else {
        $(this).find(".divClassname").removeClass("divHighlighted");
        $(this).removeClass("highlighted");
    }
});

Answer 3

试试这个：

$('.backpack_row').click( function(){
  if ($(this).css('background-color') != 'rgb(255, 255, 204)')
  {
      $(this).find(.divClassname).css('background-color', '#000000');
      $(this).css('background-color', '#ffffcc');
  }
  else
  {
      $(this).css('background-color', '#ffffff');
      $(this).find(.divClassname).css('background-color', '#ffffff');
  }
});

您需要使用el.find()功能。它会在el内找到一个基于选择器的元素。有关文档，请here

Jquery在tr里面改变div背景

3 个答案: