Jquery - Recherche d'un texte alternatif pour l'image actuelle

Question

Utilisation de l'interface utilisateur Jquery pour créer un formulaire où, lorsque vous faites glisser une image vers une entrée, le texte alt est analysé en tant que valeur de l'entrée. J'ai ce travail bien pour 1 image mais, je veux faire en sorte qu'il tire pour l'image actuelle (de sorte que je ne dois pas spécifier les ID de toutes les images). Voir le script ci-dessous:

<script>  
    $(function() { 
    var teamname = $(".helmet").attr("alt"); 

     $("#draggable").draggable(); 
     $("#draggable2").draggable(); 
     $("#droppable").droppable({ 
      drop: function(event, ui) { 
       $(this) 
        .find("input") 
         .val("" + teamname + ""); 
       } 
     }); 
     $("#droppable").droppable({ 
      out: function(event, ui) { 
       $(this) 
        .find("input") 
         .val(" "); 
       } 
     }); 
    }); 
    </script> 

Et voici le HTML

<div id="draggable" class="ui-widget-content"> 
    <img src="team1.jpg" alt="Team Name 1" class="helmet"> 
</div> 

<div id="draggable2" class="ui-widget-content"> 
    <img src="team2.jpg" alt="Team Name 2" class="helmet"> 
</div> 

<div id="droppable" class="ui-widget-header"> 
    <input type="text" name="team" /> 
</div> 

En ce moment, si je fais glisser la première ou deuxième image, son seul saisissant le texte alt de la première image. Toute aide serait grandement appréciée.

Answer 1

Modifier cette fonction, oh et vous pouvez ajouter la fonction out avec elle:

$("#droppable").droppable({ 
    drop: function(event, ui) { 
     $(this) 
      .find("input") 
       .val("" + ui.helper.find('img').attr('alt') + ""); 
    }, 
    out: function(event, ui) { 
     $(this) 
      .find("input") 
       .val(" "); 
    } 
}); 

définissant teamname en dehors de la fonction largable définit sa définition à la première .helmet qu'il trouve.

Answer 2

Étant donné que vous avez plusieurs éléments déplaçables, les choses sont plus faciles lorsque vous utilisez une classe au lieu d'un ID.

<div class="ui-widget-content draggable"> 
    <img src="team1.jpg" alt="Team Name 1" class="helmet"> 
</div> 

<div class="ui-widget-content draggable"> 
    <img src="team2.jpg" alt="Team Name 2" class="helmet"> 
</div> 

<div id="droppable" class="ui-widget-header"> 
    <input id="team-name" type="text" name="team" /> 
</div> 

<script type="text/javascript"> 
$(function() { 

    $.each($(".draggable"), function() { $(this).draggable(); }); 

    $("#droppable").droppable({ 

     drop: function(event, ui) { 
      $("#team-name").val($("img", ui.draggable).attr('alt')); 
     }, 

     out: function(event, ui) { 
      $("#team-name").val(""); 
     } 
    }); 
}); 
</script>