CODEWITHSUNDEEP
jqueryhtmlbutton
fysalyaqoob
fysalyaqoob

Reputation: 71

Why my jQuery buttons are not working on click?

I have a JQuery script that is not working. If I put button elements out of divs then it works. Please help me. Thank you.

http://jsfiddle.net/fysalyaqoob/6fornysr/8/

Code snippet:

$('button').click(function() {
  $(this).parent().find('.post').hide()
  $('.' + this.id).show(500);
});

$('#showall').click(function() {
  $('.post').show(500);
});
.post {
  width: 100px;
  height: 100px;
  background: #555;
  color: #fff;
  float: left;
  text-align: center;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 20px;
}

.clearfix {
  clear: both;
}

.wrapper {
  margin: 20px 0;
  background: #f3f3f3;
  padding: 10px;
}


}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
  <div class="2">
    <div class="wedding post">WEDDING DIL</div>
  </div>
</div>
<div class="portrait post">PORTRAIT 1</div>
<div class="personal post">PERSONAL 1</div>
<div class="wedding post">WEDDING 2</div>
<div class="wedding post">WEDDING 3</div>
<div class="portrait post">PORTRAIT 2</div>

<div id="clear" class="clearfix"></div>

<div class="wrapper">
  <div class="btn-group">
    <button id="wedding">Wedding</button>
    <button id="personal">Personal</button>
    <button id="portrait">Portraits</button>
    <button id="landscape">Landscape</button>
    <button id="showall">Show All</button>
  </div>
</div>

Upvotes: 1

Views: 88

Answers (2)

EternalHour
EternalHour

Reputation: 8621

You need to put all your .post children inside a parent container so JQuery can traverse to the correct place:

FIDDLE

$('button').click(function() {
  $(this).parentsUntil('#hide').find('.post').hide()
  $('.' + this.id).show(500);
});

$('#showall').click(function() {
  $('.post').show(500);
});
.post {
  width: 100px;
  height: 100px;
  background: #555;
  color: #fff;
  float: left;
  text-align: center;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 20px;
}

.clearfix {
  clear: both;
}

.wrapper {
  margin: 20px 0;
  background: #f3f3f3;
  padding: 10px;
}


}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
  <div class="2">
    <div class="wedding post">WEDDING DIL</div>
  </div>
</div>
<div id="hide">
  <div class="portrait post">PORTRAIT 1</div>
  <div class="personal post">PERSONAL 1</div>
  <div class="wedding post">WEDDING 2</div>
  <div class="wedding post">WEDDING 3</div>
  <div class="portrait post">PORTRAIT 2</div>

  <div id="clear" class="clearfix"></div>
</div>
<div class="wrapper">
  <div class="btn-group">
    <button id="wedding">Wedding</button>
    <button id="personal">Personal</button>
    <button id="portrait">Portraits</button>
    <button id="landscape">Landscape</button>
    <button id="showall">Show All</button>
  </div>
</div>

Upvotes: 1

FuzzyTree
FuzzyTree

Reputation: 32392

The POST elements aren't children of the button's immediate parent. Try replacing parent with parents.

$('button').click(function() {
    $(this).parents().find('.post').hide()
    $('.' + this.id).show(500);
});

$('#showall').click(function() {
    $('.post').show(500);
});

http://jsfiddle.net/6fornysr/13/

Code snippet:

$('button').click(function() {
  $(this).parents().find('.post').hide()
  $('.' + this.id).show(500);
});

$('#showall').click(function() {
  $('.post').show(500);
});
.post {
  width: 100px;
  height: 100px;
  background: #555;
  color: #fff;
  float: left;
  text-align: center;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 20px;
}

.clearfix {
  clear: both;
}

.wrapper {
  margin: 20px 0;
  background: #f3f3f3;
  padding: 10px;
}


}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
  <div class="2">
    <div class="wedding post">WEDDING DIL</div>
  </div>
</div>
<div class="portrait post">PORTRAIT 1</div>
<div class="personal post">PERSONAL 1</div>
<div class="wedding post">WEDDING 2</div>
<div class="wedding post">WEDDING 3</div>
<div class="portrait post">PORTRAIT 2</div>

<div id="clear" class="clearfix"></div>

<div class="wrapper">
  <div class="btn-group">
    <button id="wedding">Wedding</button>
    <button id="personal">Personal</button>
    <button id="portrait">Portraits</button>
    <button id="landscape">Landscape</button>
    <button id="showall">Show All</button>
  </div>
</div>

Upvotes: 2

Related Questions