Question

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

我想将.text拖动到.box
然后在drop上我需要将.text文本与图像的alt属性进行比较。

到目前为止，我有这个代码：

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

我坚持使用获取var imageName值，该值应该是放置在此set中的图像的alt标记的值。警报返回我未定义。我搜索了这个论坛和谷歌，但找不到任何解决我问题的东西。

我认为我也错过了代码中的一些内容来定义删除文本的位置，该函数应该在哪个兄弟中找到....

我真的很感谢你的帮助！提前谢谢。

Answer 1

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

和

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

惯于＆＃39;返回任何东西，因为它们只是功能。您需要做的是首先声明变量：

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

Answer 2

我已经弄清楚了。

首先，有效的代码是 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");
}
}

});

});

等等只是为了确保我得到我想要的东西。这个很棒的帖子帮助我解决问题link - 这是对术语$（this）和ui.draggable的理解。

我的第一个大错误是在变量imageName的表达式中找到（this）框的定义。
第二个错误是函数的逻辑。如果应该放置drop事件。
遍历不需要使用.find（“img”）因为.children（）已经是图像，当然图像中没有图像。

所以在纠正那些我很好!!!!!

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

获取兄弟的alt属性值并将其存储到jquery中的变量中

2 个答案: