'fadeToggle'드롭 다운 메뉴를 통해 여러 div 태그

Question

드롭 다운 메뉴를 통해 동일한 페이지에 여러 div 태그를 숨기거나 표시 할 수 있어야하지만 jQuery 'fadeToggle'을 사용하고 싶습니다. 나는 쉽게 다음 코드를 사용하여 'fadeToggle'없이이 을 수행 할 수 있습니다

이

function generateTask() { 
    document.getElementById('football').style.display = 'none'; 
    document.getElementById('football2').style.display = 'none'; 
} 

HTML :

 <select name="something" id="something"> 
     <option value="1" onclick="generateTask();">Football</option> 
     <option value="2" onclick="generateTask();">Cricket</option> 
     <option value="3" onclick="generateTask();">Baseball</option> 
    </select> 


    <div id="football">balls</div> 
    <div id="football2">shorts</div> 

그러나이 솔루션은 우아하지 않습니다. 어떤 도움을 주시면 감사하겠습니다.

주된 복잡성은 "soccer"와 "football2"라는 div 태그가 모두 크리켓에는 필요하지만 "야구"는 "football2"만 필요하다는 것입니다.

Answer 1

당신이 시도 할 수이

function generateTask(){ $('#football, #football2').toggle();} 

또는 연의는 드롭에 의해 영향을해야 모든 요소에 클래스를 추가 할 수 있습니다 : 예 :

<div id="football" class="football">balls</div> 
<div id="football2" class="football cricket">shorts</div> 
<div id="cricket" class="cricket">stick</div> 

그리고 드롭 다운 동작과 연결된 모든 요소를 ​​타겟팅하십시오.

Answer 2

옵션의 값을 div의 ID로 유지하면 훨씬 간단 해집니다. 이

마크 업 같은 뭔가

<select name="something" id="something"> 
    <option value="football">Football</option> 
    <option value="cricket">Cricket</option> 
    <option value="baseball">Baseball</option> 
</select> 
<div id="football" class="content">Football content</div> 
<div id="cricket" class="content">Cricket content</div> 
<div id="baseball" class="content">Baseball content</div> 

JS는

$("#something").change(function(){ 
    var id = "#"+this.value; 
    //This will hide all the divs with class content but not the selected option 
    $(".content").filter(":not("+id+")").hide(); 
    $(id).fadeToggle();//This will toggle div based on the selected option 
});