如何在指定變量中使用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

回答

相關問題