Question

如何在jQuery中使用变量。正如你在脚本片段中看到的那样，我给一个带有值的变量“divname”，当我使用'Jquery'淡出时。它不起作用。我真正需要的是，当图像悬停时，描述将会显示随着淡入，当鼠标消失时，描述应该消失了。提前感谢。

脚本代码段

    $j('.img_nofade').hover(function(){  
    $j(this).animate({opacity: .5}, 300);
          var i = $j(this).attr('titlename');
          var divname = "'#titleID" + i + "'";
          //alert (divname);
          $j(divname).fadeIn();
    }, 
    function(){  
       $j(this).animate({opacity: 1}, 300);
          $j(divname).fadeOut();
       }  
    );

HTML代码

     <img class="img_nofade' src="image-1.gif" titleid='1" /> 
     <div id="titleID1">my image title 1 </div>


     <img class="img_nofade' src="image-2.gif" titleid='2" /> 
     <div id="titleID2">my image title 2 </div>

      <img class="img_nofade' src="image-3.gif" titleid='3" /> 
     <div id="titleID3">my image title 3 </div>

Answer 1

无需使用'字符，只需：

var divname = "#titleID" + i;

在悬停的handlerOut函数中，divname已超出范围，您应该再次定义它。

Answer 2

我看到了一些问题。

HTML中的属性混合使用单引号和双引号。你需要使用其中一个。
$j(this).attr('titlename'); - 属性名称与您的HTML属性不匹配。（titlename vs titleid）
您对var divname存在范围问题。您可以在mouseover事件中定义它，这意味着它不会在您的mouseleave事件中定义。您应该使用next方法来获取对div的引用。 $j(this).next().fadeIn()这样可以避免首先尝试查找titleID。

Answer 3

这里有一些问题。

1）HTML中有一些拼写错误。单引号和双引号要小心。并非所有浏览器都会自动纠正这些错误，如果Javascript找不到它正在寻找的HTML，那么您的代码就会中断。

2）jQuery为获取元素提供了一些优秀的资源，而不必依赖于varname风格的东西（即var titleId = $（this）.attr（'titleId'）+ i;）

相反，你可以这样做：

 <img class="img_nofade" src="image-1.gif"/>
 <div class="description">my image title 1 </div>

 <img class="img_nofade" src="image-2.gif"/>
 <div class="description">my image title 2 </div>

 <img class="img_nofade" src="image-3.gif"/>
 <div class="description">my image title 3 </div>

我删除了titleId属性并将div从id =“TitleID1”更改为“description”。它更通用，但从样式的角度来看它也更具语义性。你不必为这些事情单独设计风格。

jQuery看起来像：

    $('.img_nofade').hover(function(){
        $(this).animate({opacity: .5}, 300);
        $(this).next('.description').animate({opacity: 0}, 300);
    },function(){  
      $(this).animate({opacity: 1}, 300);
      $(this).next('.description').animate({opacity: 1}, 300);
    });

$ .next（）方法获取下一个元素。如果传入选择器，则可以使用该选择器获取下一个元素。当您动态地向页面添加内容并希望获取列表中的下一个内容时，这非常有用。还有其他几种方法可以做到这一点，我想这恰好是这种情况下最简单的方法。

最后，您应该记住，.fadeIn（）和.fadeOut（）方法会在隐藏时将display属性更改为display：none。这意味着在上面的示例中，没有任何样式，标题将消失，导致图像一起滑动。这就是我选择在不透明度上制作动画的原因。如果您使用CSS设置这些图像以防止它们相互折叠，您绝对可以执行fadeIn / fadeOut操作。

祝你好运。

Answer 4

你有两个悬停功能，并在第一个声明divname，然后你试图在第二个使用它。这不起作用，因为它不在第二个函数的范围内。

在这种情况下，您可以使用divname来选择下一个兄弟，而不是$j(this).next()，在div之后img调用fadeIn()和fadeOut()那样。

$j('.img_nofade').hover(function(){
  $(this).next().fadeIn();
}, function(){
  $(this).next().fadeOut();
});

Answer 5

这不太难

$j('.img_nofade').hover(function(){
  var title = 'titleID' + $(this).attr('titleid');
  $('#' + title).fadeIn();
}, function(){
  var title = 'titleID' + $(this).attr('titleid');
  $('#' + title).fadeOut();
});

试试这个小提琴 http://jsfiddle.net/cmyks/

如何使用带有变量赋值的jquery

5 个答案: