javascript - Jquery获取元素属性的值并查看它是否等于不同属性的值

标签 javascript jquery attributes

我正在做的是制作一个小游戏，用户可以拖放单词的“磁铁”(实际上是图像)来创建活跃的写作句子。为了评估这句话是否正确，我在放置区域 div 中创建了一个数据属性“data-spot”，并在图像上创建了一个数据属性“data-word”。如果“data-word”中包含的单词与“data-spot”中包含的单词匹配，则匹配。此评估发生在单击“检查我的工作”按钮时。现在我已经创建了一个函数，该函数应该检查磁铁是否与第一个句子匹配，如果它们都匹配，则应在分数上加 1。

我的问题是我收到“wordpuzzle.js:27 Uncaught ReferenceError: $this is not Defined”。我已经检查过了，我的 jquery 链接位于 html 的底部，而我的 javascript 文件链接在 jquery 文件下方，所以这不是问题。我认为问题是我用来选择 jquery 中//on Submit click 下的属性值的逻辑，但我已经检查过，没有犯任何拼写错误...

<!doctype html>
<html lang="en">
<head>

<title>PR Active Writing</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="css/wordpuzzle2.css">
<link href='https://fonts.googleapis.com/css?family=Yesteryear' rel='stylesheet' type='text/css'>

</head>
<body>
<image src="images/PR-Active-Writing-Whiteboard.png" alt="whiteboard picture" id="backgroundimage"/>
<div id="startmessage">
    <h1>Welcome to the PR Active Writing Game</h1>
    <h2>Instructions</h2>
    <div>For clear, concise and strong sentences, PR writers use the active voice.
     When you click on the ‘begin’ button you will be shown a sentence that is 
     written in passive voice, your task is to rearrange the words to change the 
     sentence to active voice. There is a word bank to choose extra or different 
     words from. Simply drag the words into their correct spot and when you are 
     satisfied with your answer click the ‘Check my work’ button.
    </div>
    <button id="startactive">BEGIN</button>
</div>
<div id="wordbank">
<h1>Word Bank:</h1>
<image src="images/magnet-broken.png" alt="broken" data-word="broken" class="magnet"/>
<image src="images/magnet-city.png" alt="city" data-word="city" class="magnet"/>
<image src="images/magnet-did.png" alt="did" data-word="did" class="magnet"/>
<image src="images/magnet-distroyed.png" alt="destroyed" data-word="destroyed" class="magnet"/> <!--typo in the word "destroyed"-->
<image src="images/magnet-fixed.png" alt="fixed" data-word="fixed" class="magnet"/>
<image src="images/magnet-for.png" alt="for" data-word="for" class="magnet"/>
<image src="images/magnet-give.png" alt="give" data-word="give" class="magnet"/>
<image src="images/magnet-half.png" alt="half" data-word="half" class="magnet"/>
<image src="images/magnet-house.png" alt="house" data-word="house" class="magnet"/>
<image src="images/magnet-instructions.png" alt="instructions" data-word="instructions" class="magnet"/>
<image src="images/magnet-Mike.png" alt="Mike" data-word="Mike" class="magnet"/>
<image src="images/magnet-of.png" alt="of" data-word="of" class="magnet"/>
<image src="images/magnet-over.png" alt="over" data-word="over" class="magnet"/>
<image src="images/magnet-professor.png" alt="professor" data-word="professor" class="magnet"/>
<image src="images/magnet-profit.png" alt="profit" data-word="profit" class="magnet"/>
<image src="images/magnet-projects.png" alt="projects" data-word="projects" class="magnet"/>
<image src="images/magnet-Sam.png" alt="Sam" data-word="Sam" class="magnet"/>
<image src="images/magnet-sells.png" alt="sells" data-word="sells" class="magnet"/>
<image src="images/magnet-students.png" alt="students" data-word="students" class="magnet"/>
<image src="images/magnet-the.png" alt="the" data-word="the" class="magnet"/>
<image src="images/magnet-the2.png" alt="the" data-word="the" class="magnet"/>
<image src="images/magnet-the3.png" alt="the" data-word="the" class="magnet"/>
<image src="images/magnet-The4.png" alt="The" data-word="The" class="magnet"/>
<image src="images/magnet-The5.png" alt="The" data-word="The" class="magnet"/>
<image src="images/magnet-their.png" alt="their" data-word="their" class="magnet"/>
<image src="images/magnet-thesis.png" alt="thesis" data-word="thesis" class="magnet"/>
<image src="images/magnet-watch.png" alt="watch" data-word="watch" class="magnet"/>
<image src="images/magnet-well.png" alt="well" data-word="well" class="magnet"/>
<image src="images/magnet-wildfire.png" alt="wildfire" data-word="wildfire" class="magnet"/>
<image src="images/magnet-will.png" alt="will" data-word="will" class="magnet"/>
<image src="images/magnet-you.png" alt="you" data-word="you" class="magnet"/>
<image src="images/magnet-your.png" alt="your" data-word="your" class="magnet"/>

</div>
<div id="sentences">
<h1>Sentences:</h1>
<p>The thesis projects were done well by the students.</p>
<div id="senone"><div class="mdroppable" data-spot="The"> </div> <div class="mdroppable" data-spot="students"> </div> <div class="mdroppable" data-spot="did"> </div> <div class="mdroppable" data-spot="their"> </div> <div class="mdroppable" data-spot="thesis"> </div> <div class="mdroppable" data-spot="projects"> </div> <div class="mdroppable" data-spot="well"> </div></div>
<p>More than half of the city was destroyed by the wildfire.</p>
<div id="sentwo"><div class="mdroppable" data-spot="The"> </div> <div class="mdroppable" data-spot="wildfire"> </div> <div class="mdroppable" data-spot="destroyed"> </div> <div class="mdroppable" data-spot="over"> </div> <div class="mdroppable" data-spot="half"> </div> <div class="mdroppable" data-spot="of"> </div> <div class="mdroppable" data-spot="the"></div><div class="mdroppable" data-spot="city"></div></div>
<p id="senthree">Instructions will be given to you by your professor.</p>
<p id="senfour">The broken watch was fixed by Mike.</p>
<p id="senfive">The house was sold for a profit by Sam.</p>
<button id="checkmywork">CHECK MY WORK</button>
</div>

  <div id="successmessage">
    <p id="success1">Excellent job! You got 4-5 answers correct! Here are the correct sentences.</p>
    <p id="success2">Not bad! You got 2-3 answers correct! Here are the correct sentences.</p>
    <p id="success3">You might want to brush up on your active writing before considering Public relations. You got 0-1 answers correct. Here are the correct sentences.</p>
  </div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/wordpuzzle.js"></script>
</body>
</html>

这是我的 jquery:

$(document).ready(function(){
var pruserScore = 0;
$("#successmessage").hide();
$("#sentences").hide();

$("#startactive").click(function(){
$("#startmessage").hide();
$("#sentences").show();
}) 


//makes the magnets draggable
$( dragmagnet );
function dragmagnet() {
$(".magnet").draggable({
snap: ".mdroppable",        
cursor: 'move'
});
}

//makes underline areas droppable
$(".mdroppable").droppable();

//on submit click 
$("#checkmywork").click(function(){
$(".mdroppable").each(function(){
    if ($("#senone .mdroppable").attr('data-spot',$(this).val()) === $(".magnet").attr("data-word",$this.val())){
    pruserScore += 1; 
    console.log(pruserScore);
    }
    else{console.log("it's wrong");}
    });
})
});

最佳答案

好的，正如我在评论中提到的，这段代码存在从逻辑到语法的几个问题。

1) 第一个也是最明显的错误是你的 javascript 抛出的错误，那就是你没有将 $this 括在括号中。正确的语法是$(this)。您似乎在其他地方使用得很好，所以这只是一个简单的拼写错误。

2)您在比较中使用了 .attr() 的 setter 函数，这不是您想要做的。要相互比较两个 .attr() 值，代码应如下所示:

$(".elem1").attr("data-attribute") === $(".elem2").attr("data-attribute")

3)即使您的语法正确，您的代码仍然无法按预期工作，因为您永远不会将单个磁铁值绑定(bind)到单个数据点。例如，如果您将代码更改为以下内容:

// NOT WORKING
$(".mdroppable").each(function(){
    if ($(this).attr('data-spot') === $(".magnet").attr("data-word")){
      pruserScore += 1; 
      console.log(pruserScore);
    }
    else{
      console.log("it's wrong");
    }
});

如果您考虑一下它在做什么，它会获取当前 .mdroppable 的 data-spot 属性(这就是您想要的)。然而， $(".magnet") 正在返回所有磁铁的数组。 对 jQuery 元素数组调用 .attr() 只会返回数组中第一个项目的 .attr()。 因此，在这种情况下，您总是与“损坏”一词进行比较。

所以，问题就来了..那么你如何让它查看单曲 .magnet落在当前 .mdroppable 上在 .each()循环？

答案是，有很多方法可以做到这一点。我选择通过在内部数据属性 ( this is why I chose .data() over .attr() ) 中存储正确/不正确的值来实现此目的。因此，当元素被拖放到可拖动区域时，即进行正确/不正确检查。它设置数据属性，然后检查工作按钮简单地迭代并查看新的数据属性。

代码如下所示:

  //makes the magnets draggable
  $( dragmagnet );
  function dragmagnet() {
    $(".magnet").draggable({
      snap: ".mdroppable",        
      cursor: 'move',
    });
  }
  $("#wordbank").droppable();
  //makes underline areas droppable
  $(".mdroppable").droppable({
    out: function (event) {
      $(this).data("correct", "false");
    },
    drop: function (event, ui) {
      if ($(this).data("spot") === ui.draggable.attr('data-word')) {
        $(this).data("correct", "true");
      }
      else {
        $(this).data("correct", "false");
      }
    }
  });

  //on submit click 
  $("#checkmywork").click(function(){
    pruserScore = 0;
    $(".mdroppable").each(function(){
      if ($(this).data('correct') === "true"){
        pruserScore += 1; 
        console.log(pruserScore);
      }
      else{
        console.log("it's wrong");
      }
    });
  });

<强> HERE IS A WORKING DEMO

无论如何，我希望这可以帮助您更好地理解正在发生的事情以及为什么您的方法略有偏差。如果您还有其他疑问，请随时提问!我试图让它尽可能短，但它已经是一本小说了;)

关于javascript - Jquery获取元素属性的值并查看它是否等于不同属性的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38462338/

上一篇：javascript - 使用drawImage将大图像复制到 Canvas 会占用大量内存

下一篇：javascript - 子 ASP.net 页面关闭后刷新父 CRM 页面

相关文章：

javascript - 在 Angular 中生成动态元标签并使其实际显示在 Twitter 风格的卡片预览中？

javascript - 在 JavaScript 中检查 bool

javascript - 从 JQuery 中动态添加/删除输入字段获取 Javascript 值

javascript - 如何使用 javascript 从 rgb 格式检索单个颜色分量(红色、蓝色、绿色)？

javascript - Array.push() 仅针对对象的特定索引？

javascript - jsx 上的占位符错误

jquery - 选择 :after pseudo class/element

excel - 如何使用 VBA 读取 XML 属性到 Excel？

Python - 获取 win32com 类的所有属性/属性的列表

javascript - jQuery 按特定属性对数据进行排序

©2024 IT工具网  联系我们