堆栈内存溢出
  繁体   English   中英

Jquery获取元素属性的值，并查看它是否标记了不同属性的值

[英]Jquery getting the value of an element attribute and seeing if it equeals the value of a different attribute

 原文  2016-07-19 15:09:49  1   2    javascript/ jquery/ attributes

问题描述

我正在做的是制作一个迷你游戏，用户可以拖放“磁铁”（实际上是图像）的单词来创建活跃的写作句子。 为了评估句子是否正确，我在丢弃区域div中创建了一个数据属性“data-spot”，并在图像上创建了一个数据属性“data-word”。 如果“data-word”中包含的单词与“data-spot”中包含的单词匹配，则表示匹配。 按钮单击“检查我的工作”时会进行此评估。 现在我已经制作了一个功能，应该检查磁铁是否匹配第一句，如果它们都匹配，它应该加1分数。

我的问题是我得到了“wordpuzzle.js：27未捕获的ReferenceError：$未定义”。 我已经检查过，我的jquery链接位于我的html底部，我的javascript文件链接在jquery文件下面，所以这不是问题所在。 我认为问题是我在jquery中使用//提交点击时选择属性值的逻辑，但我已经检查过，我没有做过任何拼写错误... 

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

2 个解决方案

解决方案1
 0  2016-07-19 15:29:54

看来，你忘了包this在括号。 这将纠正错误： 

if ($("#senone .mdroppable").attr('data-spot',$(this).val()) === $(".magnet").attr("data-word",$this.val())){
                                                   // need to change this ------------------------^

但更重要的是， .attr(key, value)是一个setter调用，而不是你可能正在寻找的getter。 您可能根本不需要$(this).val() 。

解决方案2
 0 已采纳  2016-07-19 16:07:42

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

1）第一个，也是最明显的是你的javascript正在抛出的错误，那就是你没有在括号中包含$ this。 正确的语法是$（this）。 你似乎在其他地方使用它很好，所以这只是一个简单的错字。

2）你在比较中使用.attr（）的setter函数，这不是你想要做的。 要将两个.attr（）值相互比较，代码应如下所示：

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

3）即使你的语法正确，你的代码仍然无法正常工作，因为你永远不会将单个磁体值绑定到单个数据点。 例如，如果您将代码更改为以下内容： 

// 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（）只会返回数组中FIRST ITEM的.attr（）。 所以你总是在这种情况下与“破碎”这个词进行比较。

那么，问题就是乞求..那么你如何看待掉落在.each()循环中当前.mdroppable上的单个.magnet ？

答案是，有很多方法可以做到。 我之所以选择在内部数据属性中存储正确/不正确的值（ 这就是为什么我选择.data（）而不是.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");
      }
    });
  });

这是一个工作演示

无论如何，我希望这可以帮助您更好地了解正在发生的事情以及为什么您的方法略有偏差。 如果您还有其他问题，请随时提出！ 我尽量保持这个尽可能短，但它已经是一部小说;）

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery 没有获取属性值 用jQuery获取HTML属性值 使用jQuery获取属性值 当前元素的jQuery属性值 jQuery选择器-根据属性值获取元素 jQuery更改xml元素中“ value”属性的值 如何遍历jquery中的元素属性值？ Jquery：获取动态创建元素的属性值 通过其样式属性值在JQuery中选择一个元素 jQuery 如何通过属性和值获取元素是变量？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM