php - 如何使用 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）中会更容易：

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

});

---

哎呀，更新了代码以正常工作并为所选按钮着色。