Question

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

这是我的标记（请注意 - 我在doc中有很多重复的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)。另外，创建您的查询以搜索实际点击button按钮的div中的所有B1元素。这不会影响其他div

的所有按钮

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

B2和B3为.siblings() B1，因此您应使用$(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()表示同一组中的所有其他按钮。

如果要选择具有特定data-reference的按钮，请使用属性选择器，而不是.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（）显示/隐藏按钮？

3 个答案: