Question

我已经在stackoverflow中阅读了其他问题，但我无法使其正常工作。我是否尝试过html和javascript

    <div class="container wrapit" >
    <div id="one" style="display:none">
    one
    </div>
    <div id="two" style="display:none">
    two
    </div>
    <div id="three" style="display:none">
    three
    </div>
    </div>


    <div data-id="one" class="toggler">
    button1
    </div>

    <div data-id="two" class="toggler">
    button2
    </div>
 <div data-id="three" class="toggler">
    button3
    </div>

当我点击button1时，它必须仅根据id one显示data-id attribute，当我点击button2时，它必须显示id two并且应该隐藏其他人。以下是我试过的代码

$( ".toggler" ).click(function() {

 var id = $(this).data('id');
   var $div = $('.wrapit > #'+ id );
    $div.show();

});

这是小提琴 - https://jsfiddle.net/zm631u6o/1/

注意：这不重复，因为现在它显示了一个和两个，我想隐藏其他元素并且一次只显示一个

Answer 1

你想要像

这样的东西

＆＃13;

$(".toggler").click(function() {
$('.container div').hide(); //JUST ADD THIS LINE
  var id = $(this).data('id');
  var $div = $('.wrapit > #' + id);
  $div.show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container wrapit">
  <div id="one" style="display:none">
one
  </div>
  <div id="two" style="display:none">
two
  </div>
<div id="three" style="display:none">
three
  </div>
</div>


<div data-id="one" class="toggler">
  button1
</div>

<div data-id="two" class="toggler">
  button2
</div>
<div data-id="three" class="toggler">
  button3
</div>

＆＃13;

如果有变化，请告知我..

根据数据属性仅显示一个div

1 个答案: