get an alt attribute value of the sibling and store it into variable in jquery

Question

I'm new to jquery.

I'm trying to make a simple drag and drop game. The html looks like this

<div class="set-text">
   <div class="text">cinema</div>
   <div class="text">post-office</div>
</div>
<div class="set-image-box">
   <img class="image" src="images/cinema.png" alt="cinema">
   <div class="box"></div>
</div>
<div class="set-image-box">
   <img class="image" src="images/post-office.png" alt="post-office">
   <div class="box"></div>
</div>

I want to make the .text draggable to the .box
and then on drop I need to compare the .text text with the alt atribute of the image.

So far I have this code for that:

$(document).ready(function() {

   var txt = $(".text").draggable({ revert: "invalid" });

   var Box = $(".box").droppable({activeClass: "highlight",
   drop: function( event, ui ){
         $( this ).addClass("dropped");
      }
   });

   var draggedText = $(".text").mouseup( getText );
   function getText (){
      var t = $(this).text();
   }

   var imageName = $(txt).on( "dragstop", function( event, ui ) {
      var imgName = $(this).siblings(".image").find("img").attr("alt");
      alert(imgName);
   });


   if (draggedText == imageName){
      $(this).addClass("correct");
   }else{ 
      $(this).addClass("incorrect");
   }
});

I'm stuck with the getting var imageName value which should be the value of the alt tag of the image placed in this very set. alert returns me Undefined. I have searched through this forum and google but cannot find anything that solves my problem.

I think that I also miss something in the code to define where the text was dropped, in which sibling should the function look for....

I would really appreciate your help! Thanks in advance.

Xlander · Answer 1 · 2014-10-21T12:46:35.517

0

var draggedText = $(".text").mouseup( getText );

and

var imageName = $(txt).on( "dragstop", function( event, ui ) {
   var imgName = $(this).siblings(".image").find("img").attr("alt");
   alert(imgName);
});

Wont' return anything as they are just functions. What you will have to do is to declare the variable first like so:

var draggedText, imageName;
$(document).ready(function(){
   //your functions


   //then
   $(".text").mouseup(function(){
      // or you can use your function, but it should be declare outside of
      // the $(document).ready function.
      draggedText = $(this).text();
   });

   $(".text").on("dragstop", function( event, ui ) {
      //your travsersing was not good here is the correct way
      imageName = $(this).parent().siblings().childrent('.set-image-box').find("img").attr("alt");
   });

   //then your check
});

edited Oct 21 '14 at 12:46

answered Oct 21 '14 at 12:37

Xlander

1,331
12
24

I have tried this, but won't work. PS I have corrected the mistake in spelling "childrent". and also the chain of .parent().siblings().children() - doesn't seem to be correct... it returns nothing. however in w3school [link](http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_traversing_parent) I have found the manner. You've shown me here the way indeed :-) the correct I think wil be imageName = $(this).parent().children().find("img").attr("alt"); And I think something is wrong with (this) in the beginning... – Aleksandra Chuprova Oct 21 '14 at 15:02
when I do the same chain with the $(".box").parent().children().find("img").attr("alt"), I get the value of the alt tag (via alert). When I do (this) instead of (".box"), I get undefined value.... – Aleksandra Chuprova Oct 21 '14 at 15:08
My bad, sorry. What says you that? Try to log `this` – Xlander Oct 21 '14 at 15:08
If you use `.box`, no need to use `.parent ().children().find ('img')` only use `.siblings('img').attr ('alt');` – Xlander Oct 21 '14 at 15:12

score 0 · Accepted Answer · edited May 23 '17 at 10:33

I have been able to figure it out.

first of all the code which works is that var draggedText; var imageName;

$(document).ready(function() {

$(".text").draggable({ revert: "invalid" });

$(".text").mouseup(function(){
draggedText = $(this).text().trim();
alert(draggedText);
});

$(".box").droppable({activeClass: "highlight",
drop: function( event, ui ){
$( this ).addClass("dropped");
var imageName = $(this).parent().children().attr("alt").trim();
alert(imageName);

if (draggedText == imageName){
$(this).addClass("correct");
}else{ 
$(this).addClass("incorrect");
}
}

});

});

allerts are just to be sure I get what I want though. this awesome post helped me to sort the problem out link - that was the understanding of terms $(this) and ui.draggable.

my first big mistake was definition of finding the (this) box in the expression of the variable imageName.
the second mistake was the logic of functions. If else should be placed withing the drop event.
traversing didn't need to use .find("img") because the .children() are already images and of course there no images within images.

so after correcting those I'm good!!!!!

Thank you, Xlander, you've also helped me to understand some things :-)

get an alt attribute value of the sibling and store it into variable in jquery

2 Answers2