Javascript 获取同级的alt属性值并将其存储到jquery中的变量中

我不熟悉jquery

我想做一个简单的拖放游戏。html如下所示

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

我一直坚持获取var imageName值，它应该是放置在这个集合中的图像的alt标记的值。警报返回未定义的状态。我已经在这个论坛和谷歌上搜索过了，但是找不到任何能解决我问题的东西

我想我在代码中也遗漏了一些定义文本被丢弃的位置的内容，函数应该在其中查找哪个兄弟节点

我非常感谢你的帮助！提前谢谢

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

及

不会返回任何内容，因为它们只是函数。您必须首先声明变量，如下所示：

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

---

我已经能够弄明白了

首先，有效的代码是 var-draggedText； var图像名称

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

});

});

所有这些只是为了确保我得到我想要的。 这篇很棒的帖子帮助我解决了这个问题 -这就是对$this和ui.draggable这两个术语的理解

我的第一个大错误是定义在变量imageName的表达式中查找this框

第二个错误是函数的逻辑。If else应与drop事件一起放置

遍历不需要使用.findimg，因为.children已经是图像，当然图像中没有图像。 所以在纠正这些之后我很好

---

谢谢你，Xlander，你也帮助我理解了一些事情：-

我已经试过了，但不起作用。另外，我已经纠正了拼写childrent的错误。还有.parent.sibbins.children的链-似乎不正确。。。它什么也不返回。然而在学校里我发现了这种方式。你在这里给了我正确的方法：-我认为正确的方法应该是imageName=$this.parent.children.findimg.attralt；一开始我认为这有点问题……当我对$.box.parent.children.findimg.attralt执行相同的链时，我通过alert获得alt标记的值。当我这样做而不是.box时，我得到了未定义的值…我的错，对不起。你怎么说的？如果使用.box，则尝试记录此信息，无需使用.parent.children.find'img'仅使用.siddines'img.attr'alt'；

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

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

});

});