Jquery изменяет фон div внутри tr

#javascript #jquery #css

Вопрос:

Я уже довольно давно пытаюсь заставить это работать.

Я ищу способ изменить фон div внутри tr onclick с помощью jquery.

Я имею в виду, что при нажатии на tr (имя которого определяется классом) div с именем класса (который находится внутри tr) меняет цвет.

Проблема, с которой я столкнулся, заключается в том, что я могу установить цвет всех разделов с указанным именем класса, но не только того, который я щелкнул, это 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>

Спасибо,
Ян

Ответ №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');
  }

1. Еще одна вещь, можно ли в любом случае использовать фоновое изображение вместо цвета, когда я устанавливаю для .divClassname значение black?

2. Вот почему это не работало. Я использовал только одинарные кавычки вместо двойных кавычек. Спасибо

3. Кавычки не имеют значения. Вероятно, вы использовали background-color вместо background или background-image .

4. Здравствуйте, я только что понял, что это не работает для меня в IE 9 есть ли причина или вы думаете, что это может быть просто код вокруг него? Спасибо, Ян

5. Использовать alert($(this).css('background-color')) . Какой цветовой формат вы получаете?

Ответ №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");
    }
});

Ответ №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 .
Для получения документации здесь