Первый проект jQuery - Использование переменной в качестве селектора

Question

То, что я пытаюсь сделать, довольно просто, но как новичок я невероятно разочарован этим.

Вот моя первая попытка просто дать вам идею .

Я планирую сделать что-то более причудливое с изображениями, но сразу понял, что это не решение проблемы. При наведении мыши изображение изменилось до того, как оно исчезло и выглядело ужасно.

Итак, я подумал, что мог бы поместить все изображения в одно и то же место и скрыть их, делая их видимыми и выводя их на передний план при наведении курсора на соответствующую точку доступа. Я надеюсь, что есть способ уменьшить значение z-index элемента с помощью .css ().

Вот где я с этим (тот же URL, 9872_gangsters_moll_2nd_attempt.html).

$(".hotspot").mouseover(function(){
          //Get the id of this triggered item
          var imageid = $(this).attr("id");
          //use it to make corresponding image id to use as jQuery selector
          var currentImg = '#img_'+ imageid;
  //      alert(currentImg);                   //shows variable is correct
  //      $('.product-img').show();            //works fine with a class
          $('currentImg').show();                //doesn't work with a variable
          $('currentImg').addClass('front');     //same, obviously
});

Первоначально я пытался переключить видимость с css, но пошел с jQuery show / hide. Ни один не работал. Кажется, проблема в том, что в качестве селектора передается currentImg.

Буду очень признателен за любую помощь, которую вы можете предложить.

Спасибо

Энди

Answer 1

Просто удалите кавычки, чтобы использовать буквальную строку (вместо вашей переменной). $('currentImg') должно быть просто $(currentImg), вот так:

$(".hotspot").mouseover(function(){
   var currentImg = '#img_'+this.id;
   $(currentImg).show().addClass('front')
});

Другое изменение выше ... такие вещи, как .id являются свойствами DOM, вы можете получить к ним доступ напрямую (в отличие от менее эффективных .attr("id")).

Answer 2

$('currentImg').show(); использует строковый литерал , а не переменную.Избавьтесь от кавычек.

Answer 3

Когда вы заключаете набор алфавитов в одинарные или двойные кавычки, он становится строковым литералом.Когда вы говорите $ ('currentImg'), он будет искать HTML-тег с именем 'currentImg'.Что вам нужно, это $ (currentImg), как упомянуто @Nick и @ David