Jquery Wählen Sie Dropdown, um eine Klasse hinzuzufügen oder zu entfernen.

Ich erstelle eine Webanwendung, in der Sie TV-Sendungen als "Sehen", "Derzeit ansehen", "Beendet ansehen" oder "Angehalten" markieren können. Es gibt ein Dropdown-Menü, um zwischen diesen auszuwählen. Wenn "Derzeit beobachten" ausgewählt ist, sollten zwei weitere Dropdown-Felder angezeigt werden, damit ein Benutzer die zuletzt beobachtete Saison und Episode eingeben kann. Aber ich habe Probleme bekommen die jQuery richtigJquery Wählen Sie Dropdown, um eine Klasse hinzuzufügen oder zu entfernen.

HTML

<select name="updateTvStatus" class="form-control" id="updateTvStatus"> 
    <option value="4" selected>Want to Watch</option> 
    <option value="1">Currently Watching</option> 
    <option value="2">Finished Watching</option> 
    <option value="3">Stopped Watching</option> 
</select> 
<div id="last-watched" class="hidden"> 
    <select name="updateLastSeason" class="form-control" id="updateLastSeason"> 
     <option value="0">Select Season:</option> 
     <option value="1">Season 1</option> 
     <option value="2">...</option> 
    </select> 
    <select name="updateLastEpisode" class="form-control" id="updateLastEpisode"> 
     <option value="0">Select Episode:</option> 
     <option value="1">Episode 1</option> 
     <option value="2">...</option> 
    </select> 
</div> <!-- /last-watched -->

jQuery

$(document).ready(function() {  
    $("#updateTvStatus").change(function() { 
     var TVstatus = $("#updateTvStatus").val(); 
     var ishidden = $('#last-watched').hasClass("hidden"); 
     if (TVstatus == 1 && ishidden == TRUE) { 
      $('#last-watched').removeClass("hidden"); 
     } elseif (TVstatus != 1 && ishidden == FALSE) { 
      $('#last-watched').addClass("hidden"); 
     } 
    }); 
});

Quelle

2017-06-23 Kiyoko

Was sind 'true' und' false'? Und welches spezifische Problem hast du? – smarx

In Zeile 4 suchen Sie nach $ ('. Last-watched'), das nach einem Element mit 'Zuletzt gesehen' als Klassennamen sucht. Sollte es nicht $ sein ('# last-watched')? – hRdCoder

Scheint gut zu funktionieren https://codepen.io/pjabbott/pen/XgaZEV Wenn Sie "TV-Sendungen" (Plural) sagen, erstellen Sie mehrere Kopien desselben HTML-Codes mit den gleichen (doppelten) IDs? Sie müssen wirklich näher ausführen, was "richtig funktioniert" bedeutet. –

else if (elseif) zu arbeiten - Syntaxfehler.
Da JS die Groß- und Kleinschreibung unterscheidet, müssen Sie TRUE/FALSE in true/false ändern.
Sie haben den Klassenselektor anstelle des ID-Selektors angegeben. Bitte ändern Sie $ ('. Last-watched') zu $ ('# last-watched').

(Und Sie können === statt == für strikte Vergleich verwenden). Also, ein ausgefülltes Code ll wie folgt aussehen zu arbeiten:

$(document).ready(function() {  
     $("#updateTvStatus").change(function() { 
     var TVstatus = $("#updateTvStatus").val(); 
     var ishidden = $('#last-watched').hasClass("hidden"); 
     if (TVstatus == 1 && ishidden == true) { 
      $('#last-watched').removeClass("hidden"); 
     } else if (TVstatus != 1 && ishidden == false) { 
      $('#last-watched').addClass("hidden"); 
     } 
     }); 
    });

Quelle

2017-06-23 17:06:40

Ich weiß nicht, was genau Sie suchen. Aber das ist, was Sie wollen für:

$(document).ready(function() {  
$('#last-watched').hide(); 
$("#updateTvStatus").change(function() { 
var TVstatus = $("#updateTvStatus").val(); 
    if(TVstatus == 1){ 
     $('#last-watched').show(); 
    }else { 
     $('#last-watched').hide(); 
    } 
}); 
}); 
</script>

Quelle

2017-06-23 17:08:43 user8193706

Jquery Wählen Sie Dropdown, um eine Klasse hinzuzufügen oder zu entfernen.

Antwort

Verwandte Themen