hasClass() gibt immer false (jquery) zurück, auch wenn es umgeschaltet wird

Es gibt false für jedes einzelne Protokoll auf der Konsole aus. Das Umschalten funktioniert einwandfrei, wenn Sie auf die Schaltfläche für den Navigationslink und die Schaltfläche "Abbrechen" klicken. Ich habe mir this question angesehen und alle Vorschläge ausprobiert, hatte aber immer noch das selbe Problem.hasClass() gibt immer false (jquery) zurück, auch wenn es umgeschaltet wird

// add new photo toggle 
 
$('#click_new_photo a').click(function() { 
 
    console.log($(".content").hasClass('show-new-photo')); 
 
    $(".content").find(".new-photo").toggleClass('show-new-photo'); 
 
    console.log($(".content").hasClass('show-new-photo')); 
 
}); 
 

 
$("#cancel_add_new_photo").click(function() { 
 
    console.log($(".content").hasClass('show-new-photo')); 
 
    $(".new-photo").toggleClass("show-new-photo"); 
 
    console.log($(".content").hasClass('show-new-photo')); 
 
});

.new-photo { 
 
    width: 300px; 
 
    height: 200px; 
 
    border-radius: 5px; 
 
    background: #34609d; 
 
    box-shadow: 1px 1px #d6d6d6; 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    z-index: 100; 
 
    transition: opacity 0.5s ease; 
 
    opacity: 0; 
 
} 
 

 
.show-new-photo { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <nav> 
 
    <ul> 
 
     <li id="click_new_photo"><a href="#">New Photo</a></li> 
 
    </ul> 
 
    </nav> 
 
    <div class="content"> 
 
    <div class="new-photo"> 
 
     <button id="cancel_add_new_photo">Cancel</button> 
 
    </div> 
 
    ... 
 
    </div> 
 
    ... 
 
</body>

Quelle

2017-03-23 stumped

in Ihrer Demo gibt es keine Klasse ' 'Show-new-photo'' in Inhalt – guradio

Auch der Selektor‚Inhalt‘ist ganz deutlich von‚.content‘ – Pointy

Die hasClass-Methode funktioniert nicht mit untergeordneten Knoten.

können Sie etwas verwenden, wie die

return $(".content").find('.show-new-photo').length > 0;

Quelle

2017-03-23 02:56:00

Versuchen

console.log($(".content").hasClass('show-new-photo'));

Ich glaube, das durch Hinzufügen der Klasse arbeiten sollte "" in Ihrem Selektor

Quelle

2017-03-23 02:40:32

Danke für die Antwort! Es zeigt sich immer noch alles falsch, obwohl selbst mit den Änderungen – stumped

ich versuche, ids für so etwas zu verwenden. Ich habe an meinem Ende getestet und ich glaube, es sollte funktionieren. Sie könnten versuchen, mit einem ID-Attribut und wechseln Sie Ihren Code zu diesem: console.log ($ ("# contentID"). HasClass ('show-new-photo')); –

Ich glaube

$(".content").find(".new-photo").toggleClass('show-new-photo');

nur die 'Show-new-Foto' Klasse auf dem '.new-Foto' Element schaltet, nicht das ".content" Element.

$(".content").find(".new-photo").toggleClass('show-new-photo');

Wenn ich etwas fehlt bin setzen

console.log($("content").hasClass('show-new-photo'));

wird, um die gleiche Sache, ob es vor oder nach, weil die Codezeile nicht, ob $ (“ändert. content ") hat die Klasse" show-new-photo "oder nicht.

Auch sollte es $ (". Inhalt") sein, nicht $ ("Inhalt").

Quelle

2017-03-23 02:49:37

Gibt es trotzdem, dass ich testen könnte, ob "show-new-photo" ist oder nicht auf dem Bildschirm ist, wenn dieser Weg fehlerhaft ist? – stumped

@stumped nicht ganz sicher, was du meinst. Möchten Sie testen, ob ein Element in Ihrem DOM die Klasse 'show-new-photo' hat? –

hasClass() gibt immer false (jquery) zurück, auch wenn es umgeschaltet wird

Antwort

Verwandte Themen