내 CSS 클래스를 객체로 참조 하시겠습니까?

선택하면 적절한 섹션을 표시하도록되어있는 선택 옵션이 있습니다. 기본적으로 모든 것은 display:none으로 설정됩니다.내 CSS 클래스를 객체로 참조 하시겠습니까?

이 경우 6 월을 선택한 경우 june 클래스를 가진 모든 div를 표시하고 싶습니다.

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

코드가 정상적으로 작동합니다. 그러나 추가 달을 추가 할 계획이므로 더 효율적으로 작성하고 싶습니다. 이를 위해, 내가 어떻게이의 라인을 따라 뭔가를하고 가겠어요 : thischosenmonth는 사용자가 선택한 달과 일치

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

출처

2016-07-25 Jason Chen

jQuery 선택기에서 변수를 사용할 수 있습니다! $ ('.'+ userInput) .css ('display', 'block') 사용자 입력을 어떻게 가져 오나요? – Hodrobond

'$ ('.'+ $ (this) .val()). 어떻게 변경 이벤트 안에? 각각을 위해 IF를 사용하는 대신에? 그들 모두'class = 'june month'와 같은 클래스가 있다면, 적용하지 않는 다른 모든 달을 숨기려면'$ ('. month'). hide()를 먼저 호출 할 수 있습니다. –

당신은 모든 달을 설정할 수 있습니다 display:none; 첫 번째 (내가 그것에 대해 hide()를 사용합니다), 다음 (나는 그것에 대해 show()를 사용합니다) 해당 월 선택에 display:block;을 설정 드롭 다운의 값을 사용합니다. 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 클래스를 객체로 참조 하시겠습니까?

답변

관련 문제