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

});

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

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

1 个答案: