如何在指定变量中使用jquery

如何在jQuery中使用变量。正如你在脚本代码片段中看到的那样，我给值赋予了一个变量“divname”，当我使用'jquery'淡出时，它不起作用，我真正需要的是当图像悬停时，描述将显示出来如衰落，当鼠标消失了，说明应该消失。在此先感谢。如何在指定变量中使用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>

来源

2011-11-04 Winthan Aung

你HTMLS引号是绝对可怕。你打开一个'关闭一个'，反之亦然。 – CaffGeek

无需使用'焦炭，只是：

var divname = "#titleID" + i;

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

来源

2011-11-04 21:36:08

雅。那太棒了。 –

您有两个悬停功能，并在第一个中声明了divname，然后您正尝试在第二个中使用它。这不会工作，因为它不在第二个函数的范围内。

而是在这种情况下使用divname你可以使用$j(this).next()选择下一个兄弟，在这种情况下，div继img，并呼吁fadeIn()和这样的。

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

来源

2011-11-04 21:39:36 craigb

我看到了几个问题。

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

来源

2011-11-04 21:42:02 Chris

这里有几个问题。

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

2）jQuery提供了一些很好的资源帮助元素，而无需求助于VARNAME风格的东西（即VAR titleId = $（本）.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属性和ID =“TitleID1”到“描述”改变的div。它更通用，但从造型的角度来看，它也更具语义。你不必单独设计这些东西。

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属性更改为显示：none。这意味着在上面的示例中，没有任何样式，标题会消失，导致图像一起滑动。这就是为什么我选择在不透明度上进行动画处理的原因。如果您有CSS样式的图片以防止它们彼此折叠，那么您肯定可以做fadeIn/fadeOut事情。

祝你好运。

来源

2011-11-04 21:51:26 Jemaclus

这是不是太硬

$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/

来源

2011-11-04 21:59:35 CaffGeek

如何在指定变量中使用jquery

回答

相关问题