Question

您好我正在尝试实现一个js / jquery程序，其中的步骤如下当有人点击按钮1然后包装div首先是隐藏，并显示2个按钮（第二个）的包装div。同样适用于第三和第四

<div class="wrapper">
    <div class="first">
        <div class="content">content1</div>
        <button class="button">1</button>
    </div>
    <div class="second">
        <div class="content">content2</div>
        <button class="button">2</button>
    </div>
</div>

<div class="wrapper">
    <div class="first">
        <div class="content">content1</div>
        <button class="button">3</button>
    </div>
    <div class="second">
        <div class="content">content2</div>
        <button class="button">4</button>
    </div>
</div>

我试过这个，但知道它不会起作用

<script type="text/javascript">
$('.button').on('click', function(e){
    console.log($( this));
    $( this ).closest(".wrapper .second").hide();
});
</script>

Answer 1

你可以切换一个类：

＆＃13;

$('.button').on('click', function() {
  $(this).closest('div').add($(this).closest('.wrapper').find('.hidden')).toggleClass('hidden');
});

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="first">
    <div class="content">content1</div>
    <button class="button">1</button>
  </div>
  <div class="second hidden">
    <div class="content">content2</div>
    <button class="button">2</button>
  </div>
</div>
<div class="wrapper">
  <div class="first">
    <div class="content">content1</div>
    <button class="button">3</button>
  </div>
  <div class="second hidden">
    <div class="content">content2</div>
    <button class="button">4</button>
  </div>
</div>

＆＃13;

JS：

$('.button').on('click', function () {
    $(this).closest('div').add($(this).closest('.wrapper').find('.hidden')).toggleClass('hidden');
});

CSS：

.hidden {
    display: none;
}

-jsFiddle-

Answer 2

我会检查父类是什么。如果它的first隐藏元素并显示下一个，则隐藏元素并显示prev，如下所示：

$('.button').on('click', function(e){
    if($(this).parent().attr('class')=='first'){
      $(this).parent().hide();
      $(this).parent().next().show();
    }else{
      $(this).parent().hide();
      $(this).parent().prev().show();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="wrapper">
        <div class="first">
           <div class="content">content1</div>
           <button class="button">1</button>
       </div>
       <div class="second">
           <div class="content">content2</div>
           <button class="button">2</button>
       </div>

</div>

<div class="wrapper">
       <div class="first">
          <div class="content">content1</div>
          <button class="button">3</button>
      </div>
      <div class="second">
        <div class="content">content2</div>
        <button class="button">4</button>
      </div>
  </div>

Answer 3

保持HTML不变，将您的javascript替换为：

mysqldump -u root -p --max_allowed_packet=1073741824 --lock-tables=false mydb > myfile.sql

请参阅jsFiddle

按钮点击显示隐藏备用div

3 个答案:

-jsFiddle-