JS Funktion scheint nicht

Ich habe ein Array mit nur einem Element aufgerufen (schließlich will ich das Array sicher erweitern). Ganz am Anfang wird das Element in dem Array ausgeblendet, dann findet das Programm, dass das Element mit "F2" übereinstimmt, , dann erscheint ein Ball. Der Ball zeigt sich jedoch nicht. Ich mache mir Sorgen um meinen js-Code, da ich JS und jQuery irgendwie gemeinsam benutze. Obwohl ich jQuery als die Bibliothek des JS betrachten kann, bin ich mir nicht sicher, ob es das Problem hier ist. Die Art und Weise, dass ich JS-Code debuggen ist ein Bündel von alert() zu werfen und versuchen, auf der Linie alert() zu finden bekommt so nicht genannt Ich weiß, es ist ein Problem, aber noch einmal, ich bin nicht sicher, ob es das Beste ist, es zu tun seit es keine IDE in JS gibt.JS Funktion scheint nicht

$(document).ready(function() { 
 
    var notes = ["F2"]; 
 
    if($("#" + notes.pop()).innerHTML == "F2") { 
 
    $("#F2").addClass("shown") 
 
    } else { 
 
    $("#F2").removeClass("shown"); 
 
    } 
 
});

#F2 { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #ccc; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 

 
.not_shown { 
 
    display: none; 
 
} 
 

 
.shown { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div id="ball"> 
 
    <div id="F2" class="not_shown"></div> 
 
</div>

Quelle

2016-11-21 vkosyj

In Ihrem 'if' Zustand, Sie bekommen alle Elemente mit Tag-Namen' F2'. Ändern Sie '$ (notes.pop())' in '$ ('#' + notes.pop()) ' –

Danke. Es ist definitiv das Problem, aber wenn es behoben ist, ist immer noch etwas nicht in Ordnung. – vkosyj

@vkosyj was genau möchten Sie Ihren Code zu tun? – kevin628

Es gibt keine Notwendigkeit fügen Sie Inhalt in die div oder mit dem div Inhalt zu vergleichen. Da Sie nach der ID suchen, vergleichen Sie die ID.

$(document).ready(function() { 
    var notes = ['F2'], 
     $el; 

    // When selecting an element with jQuery, do it just once and 
    // then reference it as much as you want 
    $el = $('#' + notes.pop()); 

    // Use strict comparison unless you have an excellent reason not to (rare) 
    if($el.get(0).id === 'F2') { // Just compare the ID, not sure why we need to even look at the content here 
     $el.addClass('shown'); 
    } else { 
     $el.removeClass('shown'); 
    } 
});

Zum Debuggen sollten Sie den Browser DevTools verwenden, um durch den Code zu gehen. Auf diese Weise können Sie Werte an bestimmten Punkten der Ausführung überprüfen, um das Debuggen zu vereinfachen.

Edit: Fiddle with working code

Quelle

2016-11-21 02:53:12 godfrzero

Ich mag die Idee, aber der Ball zeigt sich nicht. – vkosyj

@vkosyj Meine Schuld für die Veröffentlichung ungeprüfter Code :) Fixed it, sollte jetzt funktionieren. – godfrzero

@godrzero Nochmals vielen Dank. Bin dankbar. – vkosyj

$(document).ready(function() { 
    var notes = ["F2"]; 
    if($('#' + notes.pop()).innerHTML == 'F2') { 
     $('#F2').addClass('shown') 
    } else { 
     $('#F2').removeClass('shown'); 
    } 

});

ich denke, u die # in der Auswahl

Quelle

2016-11-21 02:14:38 Bruce

Danke. Es ist definitiv das Problem, aber wenn es behoben ist, ist immer noch etwas nicht in Ordnung. – vkosyj

Ich sehe einige Probleme im Code verpassen.

Erste $('#' + notes.pop()).innerHTML ist nicht korrekt. Es sollte $('#' + notes.pop()).html() sein.

Zweitens gibt es keinen Text F2 in der div. So wird ($('#' + notes.pop()).html() == 'F2') immer fehlschlagen.

ich es leicht modifiziert.

#F2 { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #ccc; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 
.not_shown { 
 
    display: none; 
 
} 
 
.shown { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link type="text/css" rel="stylesheet" href="code.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
    <script type="text/javascript" src="code_js.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="ball"> 
 
    <div id="F2" class="not_shown">F2</div> 
 
    </div> 
 
</body> 
 

 
</html> 
 
<script> 
 
    $(document).ready(function() { 
 
    var notes = ["F2"]; 
 
    debugger; 
 
    if ($('#' + notes.pop()).html() == 'F2') { 
 
     $('#F2').addClass('shown') 
 
    } else { 
 
     $('#F2').removeClass('shown'); 
 
    } 
 

 
    }); 
 
</script>

Quelle

2016-11-21 02:38:16

Können Sie erläutern, warum die Verwendung von '.innerHTML' nicht korrekt ist? – godfrzero

Gibt es eine Möglichkeit, F2 zu verstecken, nachdem ich es ausgeführt habe, da ich nur möchte, dass ein Ball auftaucht. Vielen Dank. – vkosyj

@ godfrzero $ ('# F2') wird jQuery-Objekt zurückgeben, für das ich innerHTML bin undefiniert ist. Wenn Sie $ ('# F2') [0] .innerHTML versuchen, wird es funktionieren. –

Aus Ihrer Frage habe ich verstanden, dass Sie das Array-Element Pop wollen und vergleichen Sie es mit "F2". Wenn es übereinstimmt, dann möchten Sie die Div-Klasse ändern.

Im Folgenden finden Sie die korrigierte Javascript-Code, dies zu erreichen.

$(document).ready(function() { 
    var notes = ["F2"]; 
    if(notes.pop() === 'F2') { 
    $('#F2').addClass('shown') 
    } else { 
    $('#F2').removeClass('shown'); 
    } 
});

Sie können die Arbeitsbeispiel finden bei http://jsbin.com/nomavedamo/edit?html,css,js,output

Quelle

2016-11-21 02:45:09

Sie misunderstanded die useage von ‚innerHTML'.So Sie dies versuchen.

$(document).ready(function() { 
 
    var notes = ["F2"]; 
 
    if($('#' + notes.pop()).length) { 
 
     $('#F2').addClass('shown') 
 
    } else { 
 
     $('#F2').removeClass('shown'); 
 
    } 
 

 
});

By the way, ist es besser, etwas zu verwenden, wie Chrom dev Werkzeuge zum Debuggen von js, wie Bruchstelle einstellen und so weiter. :)

Quelle

2016-11-21 02:48:47 tomasran

die Verwendung von innerHTML. https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML – tomasran

JS Funktion scheint nicht

Antwort

Verwandte Themen