CODEWITHSUNDEEP
phpjqueryselector
mcnutty
mcnutty

Reputation: 55

How to create a selector tool with jquery

I am looking to create a dog breed selector tool where users can narrow down dog breeds by selecting certain characteristics. This is what I have so far:

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

I've tried incorporating .show() in order to get the breeds to reappear after another characteristic is reselected, but then all of the breeds reappear which defeats the purpose of the tool.

I know a little php, so let me know if it would be easer using it instead.

Thanks

Upvotes: 0

Views: 70

Answers (1)

Mottie
Mottie

Reputation: 86453

It would be easier if you just added the specific class to the name (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>

Then you can use this code:

$(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, updated the code to work properly and color the selected button.

Upvotes: 1

Related Questions