如何使用 jQuery 和 data() 来 show/hide 按钮？

Question

我正在尝试根据事件点击显示和隐藏某些按钮。我正在使用 jQuery 和 .data() 方法来处理这个问题。

这是我的标记（注意 - 我在文档中有许多重复的 div，它们具有不同的 ID，我试图为我的事件点击磨练特定的 ID）：

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

这是我的 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');
  });

我无法让按钮在单击事件时正确显示和隐藏。有什么建议吗？

修正

我添加了另一个组来显示该页面有几十个按钮，而我试图只专注于一组按钮。

Answer 1

最后两个按钮需要使用 $('button') 而不是 $(this)。此外，创建查询以搜索 div 中您实际单击 B1 按钮的所有 button 元素。这不会影响其他 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>

Answer 2

B2 和 B3 是 B1 的 .siblings() 所以你应该使用 $(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>

推荐版本，使用hide()和show()代替css 属性:

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

Answer 3

只需对您单击的按钮使用 $(this)，对同一组中的所有其他按钮使用 $(this).siblings()。

如果您想要 select 具有特定 data-reference 的按钮，请使用属性 select，而不是 .data()。要留在同一组中，请使用 $(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>

如何使用 jQuery 和 data() 来 show/hide 按钮？

How to show/hide buttons using jQuery and data()?

jquery

events

show-hide

custom-data-attribute