Verweis auf meine CSS-Klasse als Objekte?

Ich habe eine Auswahloption, die, wenn ausgewählt, soll die entsprechenden Abschnitte anzeigen. Standardmäßig ist alles auf display:none eingestellt.Verweis auf meine CSS-Klasse als Objekte?

Wenn June ausgewählt ist, möchte ich in diesem Fall alle divs anzeigen, die die Klasse june haben.

$('#list').change(function() { 
    if ($(this).val() == "june") { 
     $('.june').css('display', 'block') 
    } 
});

Der Code funktioniert so, wie er sollte. Ich möchte dies jedoch effizienter schreiben, da ich zusätzliche Monate hinzufügen möchte. Zu diesem Zweck, wie würde ich mich über etwas entlang den Linien, dies zu tun:

$('#list').change(function() { 
    if ($(this).val() == { 
      thischosenmonth 
     }) { 
     $('.{thischosenmonth}').css('display', 'block') 
    } 
});

wo thischosenmonth mit dem Monat vom Benutzer gewählten übereinstimmt?

Quelle

2016-07-25 Jason Chen

Sie können Variablen innerhalb der jQuery Selektoren verwenden! $ ('.' + UserInput) .css ('display', 'block') Wie rufen Sie die Benutzereingabe ab? – Hodrobond

Wie wäre es mit '$ ('.' + $ (This) .val()). Show();' in Ihrem Change Event? Anstatt die IF für jeden zu verwenden? Wenn sie alle dieselbe Klasse hätten, wie "class = 'june month'", dann könnten Sie '$ ('. Month ') aufrufen. Hide()' zuerst, um alle anderen nicht zutreffenden Monate auszublenden. –

Sie können alle Monate zu display:none; ersten Set (I hide() dafür verwenden), dann wird der Wert des Dropdown verwenden display:block; für den entsprechenden Monat Auswahl zu treffen (I show() dafür verwenden). Also, wenn die HTML etwas so aussahen (mit mehr Monaten natürlich):

<select id='sel-month'> 
    <option disabled selected>Choose a Month</option> 
    <option value='january'>January</option> 
    <option value='february'>February</option> 
    <option value='march'>March</option> 
</select> 
<div class='month january'>This is the January box.</div> 
<div class='month february'>This is the February box.</div> 
<div class='month march'>This is the March box.</div>

Sie ein Skript wie diese verwenden könnten den entsprechenden Monat Informationen zu zeigen, wenn der Drop-Down geändert:

$('#sel-month').change(function(){ 
    $('.month').hide(); 
    $('.' + $(this).val()).show(); 
});

hier ein ist Geige: https://jsfiddle.net/1yk44zbq/

Quelle

2016-07-25 22:50:06

Verweis auf meine CSS-Klasse als Objekte?

Antwort

Verwandte Themen