0

ユーザーが特定の特性を選択して犬種を絞り込むことができる犬種セレクター ツールを作成しようとしています。これは私がこれまでに持っているものです:

$(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を知っているので、代わりにそれを使用する方が簡単かどうか教えてください.

ありがとう

4

1 に答える 1

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

});

おっと、正しく動作するようにコードを更新し、選択したボタンに色を付けました。

于 2013-02-21T23:38:46.610 に答える