Ссылка на мой класс css как объекты?

У меня есть опция выбора, которая, если выбрана, должна показывать соответствующие разделы. По умолчанию все установлено на display:none.Ссылка на мой класс css как объекты?

В этом случае, если выбран июнь, я хочу, чтобы он показывал все div, которые имеют класс june.

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

Код работает как следует. Однако я хотел бы написать это более эффективно, потому что планирую добавить дополнительные месяцы. С этой целью, как бы я идти о делать что-то вдоль линий этого:

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

где thischosenmonth совпадает с месяцем, выбранного пользователем?

источник

2016-07-25 Jason Chen

Вы можете использовать переменные внутри селекторов jQuery! $ ('.' + UserInput) .css ('display', 'block') Как вы извлекаете пользовательский ввод? – Hodrobond

Как насчет '$ ('.' + $ (This) .val()). Show();' внутри вашего события изменения? Вместо использования IF для каждого из них? Если все они имеют один и тот же класс, например 'class = 'june month'', вы можете называть' $ ('. Month '). Hide() 'сначала, чтобы скрыть все остальные месяцы, которые не применяются. –

Вы можете установить все месяцы в display:none; первый (я буду использовать hide() для этого), а затем использовать значение выпадающего списка, чтобы установить display:block; для соответствующего выбора месяца (я буду использовать show() для этого). Так что, если HTML смотрел что-то вроде этого (с более месяцев, очевидно):

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

Вы можете использовать сценарий, как это, чтобы показать информацию на соответствующий месяц, когда выпадающий меняется:

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

Вот fiddle: https://jsfiddle.net/1yk44zbq/

источник

2016-07-25 22:50:06

Ссылка на мой класс css как объекты?

ответ

Смежные вопросы