Question

我正在尝试单击按钮时显示下一个元素（Div）。但是问题是Div没有显示。我需要更改什么代码？

这是我到目前为止尝试过的。

 $(document).ready(function () {  
    $('.wrap_tooltip .ico').click(function(){
        var $self = $(this);
        var $target = $('.wrap_tooltip .tooltip');
        $target.show();
        $target.find('.btn_close').click(function(){
            $target.focus();
        }); 
    }); 
});

.tooltip { display:none }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="wrap_tooltip">
  <button>click1</button>
  <div class="tooltip">
    tooltip show
    <button class="btn_close">close</button>
  </div>
</div>


<br><br>

<div class="wrap_tooltip">
  <button>click2</button>
  <div class="tooltip">
    tooltip show
    <button class="btn_close">close</button>
  </div>
</div>

Answer 1

首先，您没有类.ico的元素。

然后使用var $target = $self.next('.tooltip');，使$target等于按钮旁边的.tooltip。

演示

$(document).ready(function () {  
    $('.wrap_tooltip .ico').click(function(){
        var $self = $(this);
        var $target = $self.next('.tooltip');
        $target.show();
    }); 
    
    $(".btn_close").click(function() {
      $(this).closest(".tooltip").hide();
    });
});

.tooltip { display:none }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="wrap_tooltip">
  <button class="ico">click1</button>
  <div class="tooltip">
    tooltip show
    <button class="btn_close">close</button>
  </div>
</div>


<br><br>

<div class="wrap_tooltip">
  <button class="ico">click2</button>
  <div class="tooltip">
    tooltip show
    <button class="btn_close">close</button>
  </div>
</div>

Answer 2

像这样更新代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.tooltip{ display:none; }
</style>
<script type="text/javascript">

 $(document).ready(function () {  
    $('.wrap_tooltip button').click(function(){

        $(this).siblings(".tooltip").show();
    }); 

    $('.wrap_tooltip .btn_close').click(function(){

        $(this).parent().hide();
    });
});

</script>

<div class="wrap_tooltip">
  <button>click1</button>
  <div class="tooltip">
    tooltip show
    <button class="btn_close">close</button>
  </div>
</div>


<br><br>

<div class="wrap_tooltip">
  <button>click2</button>
  <div class="tooltip">
    tooltip show
    <button class="btn_close">close</button>
  </div>
</div>

单击按钮显示div的下一个元素

2 个答案: