jquery로 선택 도구를 만드는 방법

Question

사용자가 특정 품종을 선택하여 개 품종을 좁힐 수있는 개 품종 선택 도구를 만들려고합니다.

$(document).ready(function(){ 
    $("#big,#long").click(function(){ 
    $("#pug").hide(); 
    }); 
    $("#small,#long").click(function(){ 
    $("#bull").hide(); 
    }); 
    $("#big,#short").click(function(){ 
    $("#pom").hide(); 
    }); 
    $("#small,#short").click(function(){ 
    $("#new").hide(); 
    }); 
}); 
</script> 
<p>Size</p> 
<button id="small">Small</button> 
<button id="big">Big</button> 
<p>Coat</p> 
<button id="short">Short Hair</button> 
<button id="long">Long Hair</button> 
<p id="pug">Pug</p> 
<p id="bull">Bulldog</p> 
<p id="pom">Pomeranian</p> 
<p id="new">Newfoundland</p> 

내가 다시 선택 다른 특성 후 다시 할 수있는 품종을 얻기 위해() .show 통합 시도했다, 그러나 다른 품종 모두의 목적을 패배하는 다시 : 이것은 내가 지금까지 무엇을 가지고 도구.

나는 약간의 PHP를 알고 있으므로, 대신 그것을 사용하는 것이 더 쉬운지 알려 주시기 바랍니다.

감사

Answer 1

그냥 이름 ( demo)에 특정 클래스를 추가 한 경우 그것은 쉬울 것

:

$(function() { 
    var size = '', 
     coat = '', 
     $list = $('#list'), 
     selectType = function() { 
      $list.find('p').hide(); 
      $list.find('p' + size + coat).show(); 
     }; 

    $("#big,#small").click(function() { 
     size = '.' + this.id; 
     $('#big').toggleClass('selected', this.id === "big"); 
     $('#small').toggleClass('selected', this.id === "small"); 
     selectType(); 
    }); 
    $("#short,#long").click(function() { 
     coat = '.' + this.id; 
     $('#short').toggleClass('selected', this.id === "short"); 
     $('#long').toggleClass('selected', this.id === "long"); 
     selectType(); 
    }); 

}); 

---

:

<p id="pug" class="small short">Pug</p> 
<p id="bull" class="big short">Bulldog</p> 
<p id="pom" class="small long">Pomeranian</p> 
<p id="new" class="big long">Newfoundland</p> 

그런 다음이 코드를 사용할 수 있습니다

Opps, 코드가 제대로 작동하도록 업데이트하고 선택한 단추의 색을 지정합니다.