Jquery bekommt den Wert eines Elementattributs und sieht, ob es den Wert eines anderen Attributs erzeugt

Was ich mache ist ein Minispiel, in dem Benutzer "Magnete" (eigentlich Bilder) von Wörtern ziehen und ablegen können, um aktives Schreiben zu erstellen Sätze. Um zu beurteilen, ob der Satz korrekt ist, habe ich im Drop-Bereich divs ein Datenattribut "Datenpunkt" erstellt und auf den Bildern ein Datenattribut "Datenwort" erstellt. Wenn das in "Datenwort" enthaltene Wort mit dem in "Datenpunkt" enthaltenen Wort übereinstimmt, ist es eine Übereinstimmung. Diese Auswertung erfolgt auf Knopfdruck "Meine Arbeit überprüfen". Im Moment habe ich eine Funktion erstellt, die überprüfen soll, ob die Magnete für Satz 1 passen und wenn sie alle übereinstimmen, sollte sie 1 zur Punktzahl hinzufügen.Jquery bekommt den Wert eines Elementattributs und sieht, ob es den Wert eines anderen Attributs erzeugt

Mein Problem ist, dass ich bekomme "Wordpuzzle.js: 27 Uncaught ReferenceError: $ das ist nicht definiert". Ich habe überprüft und meine Links zu jquery sind am Ende meines HTML und meine Javascript-Datei ist unter den jquery-Dateien verknüpft, so dass das nicht das Problem ist. Ich denke, das Problem ist die Logik ich die Attributwerte unter dem // auf Senden klicken in meinem Jquery wählen, aber ich habe überprüft, und ich habe keinen Fehler gemacht ...

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

dies mein jquery ist :

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

Quelle

2016-07-19 G.H

'$ (this)' nicht '$ this' ??? Ich sehe nirgends "$ this" in deinem Code definiert ... Und sei dir nur bewusst, dass dein Spiel einfach zu hacken wäre, aber ich denke, du hast es nur aus Unterhaltungsgründen gemacht. EDIT: Ich sehe sowieso Ihre Check-Bedingung ist falsch, vergleichen 'attr()' Setter, die jq Matched-Set zurückgeben, nicht Attribut Wert –

Okay, wie ich in den Kommentaren erwähnt habe, gab es verschiedene Probleme mit diesem Code, der von Logik bis Syntaktik reichte.

1) Die erste und offensichtlichste ist der Fehler, den Ihr Javascript geworfen hat und das war, dass Sie $ nicht in Klammern geschrieben haben. Die korrekte Syntax ist $ (this). Du scheinst es anderswo gut zu gebrauchen, also ist das nur ein einfacher Tippfehler.

2) Sie haben die Setter-Funktion für .attr() in Ihrem Vergleich verwendet, was Sie nicht möchten. So vergleichen Sie zwei .attr() Werte gegeneinander, sollte der Code wie folgt aussehen:

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

3) Selbst wenn man diese Dinge syntaktisch korrekt bekam, Ihren Code immer noch nicht wie vorgesehen funktionieren, weil Sie binden Sie niemals einen einzelnen Magnetwert an einen einzelnen Datenpunkt. Zum Beispiel verändert, wenn Sie Ihren Code auf die folgenden:

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

Wenn Sie darüber nachdenken, was dies tut, es nimmt die Daten vor Ort Attribut des aktuellen .mdroppable (das ist, was Sie wollen). ABER, $ (". Magnet") gibt Ihnen die Anordnung aller Magneten zurück. Der Aufruf von .attr() für ein Array von jQuery-Elementen gibt nur das .attr() für das erste Element im Array zurück. Man vergleicht also immer gegen das Wort "kaputt" in diesem Fall.

Also, die Frage bittet dann .. gut, wie bekommen Sie es auf die einzelne .magnet, die auf die aktuelle .mdroppable in der .each() Schleife fallen gelassen wird?

Die Antwort ist, es gibt eine Menge Möglichkeiten, dass Sie es tun können. Ich habe es gewählt, indem ich einen korrekten/falschen Wert in einem internen Datenattribut gespeichert habe (this is why I chose .data() over .attr()).Wenn also das Element auf einen ziehbaren Bereich fallengelassen wird, führt es die korrekte/inkorrekte Überprüfung durch. Es setzt das Datenattribut, und dann durchläuft die Schaltfläche zum Überprüfen der Arbeit einfach das neue Datenattribut.

Der Code sieht wie folgt aus:

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

Wie auch immer, ich hoffe, das hilft, besser zu verstehen, was los ist und warum Ihr Ansatz leicht ausgeschaltet war. Wenn Sie weitere Fragen haben, zögern Sie nicht zu fragen! Ich habe versucht, das so kurz wie möglich zu halten, aber es ist schon ein Roman;)

Quelle

2016-07-19 16:07:42 mhodges

danke für die Erklärung, dass attr() ein Array von jQuery-Elementen aufruft! Das erklärt einiges, was früher passiert ist. Ihr Denken ist sehr einfach zu folgen und Ihre Erklärung ist logisch. Vielen Dank! –

Gern geschehen! =) Ich habe auch die Demo aktualisiert, um das korrekte/falsche Flag zurückzusetzen, wenn sie das Wort aus der Drop-Zone ziehen. Ein viel besserer (und sicherer) Weg, das korrekte/inkorrekte Flag zu implementieren, wäre die Verwendung der .data() - Funktion anstelle von .attr ("data- *"). Dadurch wird ein internes Datenattribut festgelegt, das im DOM nicht sichtbar oder editierbar ist. Ändern Sie die Demo erneut, um diese Änderung einzuschließen. – mhodges

Es scheint, dass Sie this in Pars zu wickeln vergessen. Dies wird den Fehler beheben:

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

Aber noch wichtiger ist, .attr(key, value) ist ein Setter Aufruf, kein Getter wie Sie können suchen. Sie brauchen wahrscheinlich die $(this).val() überhaupt nicht.

Quelle

2016-07-19 15:29:54 Will

Das ist nur ein kleiner Fehler in einem viel größeren Spektrum von Problemen mit diesem Code. – mhodges

Ja, ich habe noch so viel zu lernen. Aber wenn Sie etwas kommentieren, ist es hilfreicher, konstruktiv mit Ihrer Kritik umzugehen. –

@ G.H Ja, ich arbeite daran, dass der gesamte Code funktioniert, während wir sprechen. Ich habe es gerade funktioniert, ich werde in einer Minute eine Antwort schreiben. Geduld haben;) – mhodges

Jquery bekommt den Wert eines Elementattributs und sieht, ob es den Wert eines anderen Attributs erzeugt

Antwort

Verwandte Themen