1

I am trying to show and hide certain buttons based on event click. I am using jQuery and the .data() method to handle this.

Here is my markup (note - I have many repeating divs in the doc with differing ids and I trying to hone in on particular ids for my event click):

<div>
  <button id="activate001003" class="jq_activate" data-reference="B1" style="display: inline;" type="button">B1</button>
  <button id="deactivate001003" class="jq_deactivate" data-reference="B2" style="display: none;" type="button">B2</button>
  <button id="edit001003" class="jq_edit" data-reference="B3" style="display: none;" type="button">B3</button>
</div>
<div>
  <button id="activate002007" class="jq_activate" data-reference="B1" style="display: inline;" type="button">B1</button>
  <button id="deactivate002007" class="jq_deactivate" data-reference="B2" style="display: none;" type="button">B2</button>
  <button id="edit002007" class="jq_edit" data-reference="B3" style="display: none;" type="button">B3</button>
</div>

Here is my jQuery:

  $( '.jq_activate' ).click(function() {
    $(this).data('reference','B1').css('display', 'none');
    $(this).data('reference','B2').css('display', 'inline');
    $(this).data('reference','B3').css('display', 'inline');
  });

I can't get the buttons to show and hide properly on click event. Any suggestions?

Amendment

I added another group to show that the page has dozens of buttons and I am trying to hone in on only 1 set of buttons.

Improve this question
14
  • You're setting the data and CSS of $(this) all 3 times. I don't think that's what you want, but I can't figure out what you really want. Commented Apr 21, 2018 at 11:17
  • What do you think .data('reference', 'B2') means? It's not a filter that matches data-reference="B2", it means to change data-reference to B2(actually it works on an internal jQuery cache, it doesn't update the attribute). Commented Apr 21, 2018 at 11:20
  • Could you explain clearly what you're trying to do? Which buttons should be displayed and hidden? Commented Apr 21, 2018 at 11:22
  • I amended my OQ to show there are many button groups on the page. Commented Apr 21, 2018 at 11:25
  • That doesn't help. Which ones are supposed to be hidden and shown? And why don't you use .hide() and .show()? Commented Apr 21, 2018 at 11:26

3 Answers 3

Reset to default
1

B2 and B3 are .siblings() of B1 so you should use $(this).siblings()

$('.jq_activate').click(function() {
  $(this).data('reference', 'B1').css('display', 'none');
  $(this).siblings().data('reference', 'B2').css('display', 'inline');
  $(this).siblings().data('reference', 'B3').css('display', 'inline');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button id="activate001003" class="jq_activate" data-reference="B1" style="display: inline;" type="button">B1</button>
  <button id="deactivate001003" class="jq_deactivate" data-reference="B2" style="display: none;" type="button">B2</button>
  <button id="edit001003" class="jq_edit" data-reference="B3" style="display: none;" type="button">B3</button>
</div>

Recommended version, using hide() and show() instead of css property:

$('.jq_activate').click(function() {
  $(this).data('reference', 'B1').hide();
  $(this).siblings('[data-reference="B2"]').show();
  $(this).siblings('[data-reference="B3"]').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button id="activate001003" class="jq_activate" data-reference="B1" style="display: inline;" type="button">B1</button>
  <button id="deactivate001003" class="jq_deactivate" data-reference="B2" style="display: none;" type="button">B2</button>
  <button id="edit001003" class="jq_edit" data-reference="B3" style="display: none;" type="button">B3</button>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

The second .siblings() line is overriding what the first one did. Why do you have it?
@Barmar The first line make B1 hide, right? second line just show B2 and third line just show B3 what's the problem?
Awesome @Pedram -- that solved it!! Thanks so much. Plus it is nice and clean and condensed and simple code...
and I'll revert back to show/hide()...I was trying everything I could think of and ended up with .css()
@H.Ferrence This answer is changing the data, which I don't think you want.
|
1

You need to use $('button') instead of $(this) for the last two buttons. Also, create your query to search for all the button elements in that div where you actually click for the B1 button. This will not affect all the buttons of other div

$( '.jq_activate' ).click(function() {
   $(this).closest('div').find('button').each(function(){
    if($(this).data('reference') === 'B2' || $(this).data('reference') === 'B3'){
      $(this).css('display','inline');
    }
  });
  $(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button id="activate001003" class="jq_activate" data-reference="B1" style="display: inline;" type="button">B1</button>
  <button id="deactivate001003" class="jq_deactivate" data-reference="B2" style="display: none;" type="button">B2</button>
  <button id="edit001003" class="jq_edit" data-reference="B3" style="display: none;" type="button">B3</button>
</div>

<div>
  <button id="activate001005" class="jq_activate" data-reference="B1" style="display: inline;" type="button">B1</button>
  <button id="deactivate001006" class="jq_deactivate" data-reference="B2" style="display: none;" type="button">B2</button>
  <button id="edit001003" class="jq_edit" data-reference="B3" style="display: none;" type="button">B3</button>
</div>


<div>
  <button id="activate001003" class="jq_activate" data-reference="B1" style="display: inline;" type="button">B1</button>
  <button id="deactivate001003" class="jq_deactivate" data-reference="B2" style="display: none;" type="button">B2</button>
  <button id="edit001003" class="jq_edit" data-reference="B3" style="display: none;" type="button">B3</button>
</div>

Improve this answer

5 Comments

B1 should hide after click
The second and third lines operate on the same buttons.
But what about all the other <button id="{many more}" data-reference="B2"> ? Won't they be effected as well @AnkitAgarwal?
That did not cut it...all of the other buttons on the page got impacted by the $('button') directive
You still have $('button').data('reference','B3').css('display', 'inline'); that shows all the buttons.
0

Just use $(this) for the button you clicked on, and $(this).siblings() for all the other buttons in the same group.

If you want to select buttons with a specific data-reference, use an attribute selector, not .data(). To stay within the same group, use $(this).parent().find().

$('.jq_activate').click(function() {
  $(this).parent().find('button[data-reference=B1]').hide();
  $(this).parent().find('button[data-reference=B2],button[data-reference=B3]').show()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button id="activate001003" class="jq_activate" data-reference="B1" style="display: inline;" type="button">B1</button>
  <button id="deactivate001003" class="jq_deactivate" data-reference="B2" style="display: none;" type="button">B2</button>
  <button id="edit001003" class="jq_edit" data-reference="B3" style="display: none;" type="button">B3</button>
</div>
<div>
  <button id="activate002007" class="jq_activate" data-reference="B1" style="display: inline;" type="button">B1</button>
  <button id="deactivate002007" class="jq_deactivate" data-reference="B2" style="display: none;" type="button">B2</button>
  <button id="edit002007" class="jq_edit" data-reference="B3" style="display: none;" type="button">B3</button>
</div>

Improve this answer

3 Comments

But OP want to call other button with data attribute
@Pedram I don't think so, I think he was just confused about what that does.
I think in this case OP should use [data-reference='B2'] etc.. instead of data()

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.