Jqueryが要素属性の値を取得し、それが別の属性の値と等しいかどうかを調べる

私がやっていることは、ユーザーが単語の「磁石」（実際にはイメージ）をドラッグアンドドロップして、文章。文が正しいかどうかを評価するために、私はドロップエリアdivsにデータ属性 "data-spot"を作成し、データ属性 "data-word"を画像上に作成しました。 "data-word"に含まれる単語が "data-spot"に含まれる単語と一致する場合、それは一致します。この評価は、「自分の仕事をチェックする」ボタンをクリックすると発生します。今、私は、磁石が文1のためにマッチしているかどうかをチェックする関数を作りました。もしそれらがすべて一致すれば、スコアに1を加えるべきです。Jqueryが要素属性の値を取得し、それが別の属性の値と等しいかどうかを調べる

私の問題は、「wordpuzzle.js：27 Uncaught ReferenceError：$ this is not defined」です。私はチェックしてjQueryへの私のリンクは私のhtmlの下にあり、私のjavascriptファイルはjqueryファイルの下にリンクされているので問題はありません。私は、問題は、私はこれが私の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>

提出に//下の属性値を選択するために使用するロジックだと思います：

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

出典

2016-07-19 G.H

'$（これ）'ではなく '$ this'ですか？私はあなたのコードで定義された '$ this'はどこにも見当たりません...あなたのゲームがハックするのは簡単ではないことに気をつけてください。しかし面白い目的のためだけに作ったと思います。編集：私はあなたのチェック条件が間違っていると思うと、 'attr（）' setterと比較して、jqのマッチしたセットを返します。属性値は –

私がコメントで述べたように、このコードにはロジックから構文に至るまでいくつかの問題がありました。

1）最初の、そして最も明白なことは、あなたのJavaScriptが投げていたエラーです。これは$をカッコで囲まなかったことです。正しい構文は$（this）です。あなたは他の場所でそれをうまく使っているようです。それは単純なタイプミスです。

2）あなたはあなたのやりたいことではなく、あなたの比較で.attr（）のためにsetter関数を使っていました。互いに対して）の値を2 .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のデータスポットの属性を取っています。しかし、$（ "。磁石"）はあなたにすべての磁石の配列を返しています。 jQuery要素の配列で.attr（）を呼び出すと、配列内の最初の項目の.attr（）が返されます。この場合、常に「壊れた」という単語と比較しています。

したがって、質問が返されます。が現在.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

、私はこれは、あなたがより良い何が起こっているか理解するのに役立ちます、なぜあなたのアプローチは少しオフだった願っています。これ以上質問がある場合は、お気軽にお問い合わせください！私はできるだけ短くしておきましたが、それはすでに小説です;）

出典

2016-07-19 16:07:42 mhodges

attr（）がjquery要素の配列を呼び出すことについて説明してくれてありがとう！それは以前に起こっていたことを説明しています。思考は非常に簡単で、説明は論理的です。本当にありがとう！ –

よろしくお願いします！ =）また、単語をドロップゾーンからドラッグするときに正しい/間違ったフラグをリセットするようデモを更新しました。また、正しい/間違ったフラグを実装する方がより良い（より安全な）方法は、.attr（ "data- *"）の代わりに.data（）関数を使用することです。これにより、DOMで表示または編集できない内部データ属性が設定されます。変更を反映するためにデモを再度変更する。 – mhodges

あなたが括弧でthisをラップするのを忘れたことが表示されます。これは、エラーを修正します：

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

しかし、もっと重要なのは、.attr(key, value)はセッターの呼び出しではなく、あなたが探してすることができるようゲッターがあります。おそらく$(this).val()はまったく必要ありません。

出典

2016-07-19 15:29:54 Will

ではありません。 – mhodges

ええ、私はまだ多くのことを学びました。しかし、物事にコメントするつもりなら、あなたの批判に建設的であることがより有益です。 –

@ G.Hはい、私はあなたのコードの全体を私たちが話すように働かせることに取り組んでいます。私はちょうどそれを働かせた、私は答えを1分で掲示する。患者になる;） – mhodges

Jqueryが要素属性の値を取得し、それが別の属性の値と等しいかどうかを調べる

答えて

関連する問題