jquery - 第一个 jQuery 项目 - 使用变量作为选择器

Question

我想做的事情非常简单，但作为初学者，我对此感到非常沮丧。

这是我的 first attempt just to give you the idea .

我计划对图像做一些更奇特的事情，但我立刻就发现这不是解决方案。鼠标悬停在图像淡出之前正在更改图像，看起来很糟糕。

所以，我想我可以将所有图像放在同一个位置并隐藏它们，使它们可见，并在鼠标悬停在相应热点时将它们带到前面。我希望有一种方法可以使用 .css() 减少元素的 z-index 值。

这就是我的情况(相同的 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 的显示/隐藏。两者都不起作用。问题似乎在于将“currentImg”作为选择器传递。

如果您能提供任何帮助，我们将不胜感激。

谢谢

安迪

Answer 1

只需删除引号，使其使用文字字符串(而不是您的变量)。 $('currentImg') 应该只是 $(currentImg)，如下所示:

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

上面的其他更改...类似 .id是 DOM 属性，您可以直接访问它们(而不是效率较低的 .attr("id"))。