Php 如何使用jquery创建选择器工具

我期待着创建一个狗品种选择器工具，用户可以缩小狗品种选择某些特征。这就是我到目前为止所做的：

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

$（文档）.ready（函数（）{
$（“#大，#长”）。单击（函数（）{
$（“#帕格”）.hide（）；
});
$（“#小，#长”）。单击（函数（）{
$（“#牛”）.hide（）；
});
$（“#大，#短”）。单击（函数（）{
$（“#pom”）.hide（）；
});
$（“#小，#短”）。单击（函数（）{
$（“#新建”）.hide（）；
});
});
大小

小的
大的
外套

短发
长发
哈巴狗

牛头犬

波美拉尼亚

纽芬兰

我尝试合并.show（）以使品种在重新选择另一个特征后重新出现，但随后所有品种都重新出现，这与工具的用途背道而驰

我懂一点php，所以请告诉我使用它是否更容易

---

谢谢

如果您只是将特定类添加到名称（）中，会更容易：

---

---

Opps，更新代码以使其正常工作，并为所选按钮上色。

是否要将它们合并？例如，单击

small

和

long

将隐藏

#bull

？当您单击某个按钮时，有东西隐藏了，您想再次单击同一个按钮后显示隐藏的内容吗？@BenM我想在选择了small或long（或两者）时隐藏bull。@aurel切换狗的品种是一个选项，但我的目标是能够在没有选择特征时隐藏一个品种，并在选择特征时显示其特征。非常感谢您的帮助。上面的代码看起来很棒，完成了我想要的。最后，我想添加额外的品种特征，如气质、可训练性等。上面的代码模式是否允许我达到这一目的，或者我必须采取另一种方法？是的，只需遵循该模式并在末尾添加新名称<代码>$list.find（'p'+大小+外套+stat1+stat2）.show（）我刚刚做了，它的效果非常好，只是第一次点击后按钮的颜色仍然是蓝色。有没有一种方法可以使颜色与值一起切换？

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

$(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();
    });

});