Как я могу использовать переменную в селекторе атрибутов jQuery?

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть поле выбора с несколькими параметрами — каждое из этих значений параметра соответствует атрибуту «value» на некоторых изображениях ниже. Функциональность, которую я хочу, заключается в том, что при изменении значения selectbox изображение с соответствующим значением выделяется красной рамкой. Вот код:

 function assignValue() {
  selectboxvalue = $('#Box_style').val() ;
  $('.tabContent img[value=" selectboxvalue "]').css({border: '1px solid #c10000'});
}

$('#Box_style').change(assignValue);
  

Просматриваю документацию jquery (http://api.jquery.com/attribute-equals-selector ), по-видимому, это должно сработать…

Буду признателен за любую помощь, спасибо!

Комментарии:

1. Я думаю, ваша проблема просто в том, что вы перепутали ' и " .

2. @kinsey Это непонимание базовых операций со строками, а не функциональности jQuery. Для вас было бы хорошей идеей попытаться разобраться в строках и конкатенации. Собственно, что и почему в проблеме, а не как. Если вы программируете в текстовом редакторе, IDE с подсветкой синтаксиса (и пониманием того, почему вещи выделяются именно так, как они это делают) очень помогла бы

Ответ №1:

До jQuery 1.7

Будет работать следующее:

 $('.tabContent img[value=' selectboxvalue ']').css({border: '1px solid #c10000'});
  

jQuery 1.7 и более поздние версии

В 1.7 jQuery изменил синтаксис, чтобы требовать, чтобы attributes значение заключалось в кавычки:

 $('.tabContent img[value="' selectboxvalue '"]').css({border: '1px solid #c10000'});
  

Ответ №2:

Кавычки перепутаны:

   $('.tabContent img[value="' selectboxvalue '"]').css({border: '1px solid #c10000'});
  

Ответ №3:

В дополнение к вышесказанному, это больше не работает, как упоминалось выше (хотя это также может быть только мой код). Одинарная кавычка приводит к путанице в коде. Работает следующий код

Начиная с jQuery 3.2.1 и более поздних версий

 $("#clickmap a[gruppe=" gruppeId "]").children("path").addClass('lastClicked');