Comment utiliser jquery avec une variable affectée

Question

Comment utiliser une variable dans jQuery. Comme vous le voyez dans l'extrait de script, j'attribue une variable "divname" à la valeur, et quand j'utilise "Jquery" pour fondu, ça ne marche pas. Ce dont j'ai vraiment besoin, c'est quand l'image survole, la description apparaitra comme en fondu, lorsque la souris est parti, la description devrait avoir disparu. Merci à l'avance.

Script snippet

$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(); 
     } 
    ); 

code 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

Pas besoin d'utiliser le ' char, seulement:

var divname = "#titleID" + i; 

Et dans la fonction handlerOut du planeur, le divname est déjà hors de portée, vous devez le définir à nouveau.

Answer 2

Vous avez deux fonctions pour le vol stationnaire et avez déclaré divname dans le premier, puis vous essayez de l'utiliser dans la seconde. Cela ne fonctionnera pas car il n'est pas dans la portée de la deuxième fonction.

Au lieu d'utiliser la divname dans ce cas, vous pouvez utiliser $j(this).next() pour sélectionner le prochain frères et soeurs, dans ce cas, le div suivant la img et appeler fadeIn() et fadeOut() de cette façon.

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

Answer 3

Il y a quelques problèmes que je vois.

1. Vos attributs dans votre HTML mélangent des guillemets simples et doubles. Vous devez utiliser l'un ou l'autre.
2. $j(this).attr('titlename'); - Le nom de l'attribut ne correspond pas à vos attributs HTML. (titlename vs titleid)
3. Vous avez un problème de portée avec la variable divname. Vous le définissez dans votre événement mouseover, ce qui signifie qu'il ne sera pas défini dans votre événement mouseleave. Vous devriez simplement utiliser la méthode next pour obtenir une référence à votre div. $j(this).next().fadeIn() Cela éviterait d'essayer de trouver le titleID en premier lieu.

Answer 4

Il y a quelques problèmes ici.

1) Vous avez quelques fautes de frappe dans le code HTML. Faites attention aux guillemets simples et doubles. Tous les navigateurs ne corrigent pas automatiquement ces types d'erreurs, et si Javascript ne trouve pas le code HTML recherché, alors votre code va se casser.

2) jQuery offre d'excellentes ressources pour obtenir des éléments sans avoir à se replier sur la chose de style nomvar (ie var titleId = $ (this) .attr ('titleId') + i;)

lieu , vous pouvez faire quelque chose comme ceci:

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

je me suis débarrassé de l'attribut titleId et changé les divs de id = « TitleID1 » à « description ». C'est plus générique, mais c'est aussi plus sémantique d'un point de vue stylistique. Vous n'aurez pas à personnaliser chacune de ces choses.

Le jQuery ressemblerait à quelque chose comme:

$('.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); 
    }); 

La méthode .next de $() saisit l'élément suivant. Si vous passez dans un sélecteur, vous pouvez récupérer l'élément suivant avec ce sélecteur. Ceci est vraiment utile lorsque vous ajoutez dynamiquement des éléments à la page et que vous souhaitez récupérer le suivant dans la liste. Il y a plusieurs autres façons de le faire, ce qui est le plus facile dans ce scénario, je pense. Enfin, gardez à l'esprit que les méthodes .fadeIn() et .fadeOut() modifieront l'attribut d'affichage à afficher: none lors de la dissimulation. Cela signifie que dans votre exemple ci-dessus, sans aucun style, les titres disparaîtraient, entraînant le glissement des images ensemble. C'est pourquoi j'ai choisi d'animer sur l'opacité à la place. Vous pouvez certainement faire la chose fadeIn/fadeOut si vous avez CSS style ces images pour les empêcher de s'effondrer les uns sur les autres.

Bonne chance.

Answer 5

Ce n'est pas trop difficile

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

Essayez ce violon http://jsfiddle.net/cmyks/