jquery - Jquery单击点更改div

Question

嗯，我在一个块中有 3 个点。我有那个块的 3 个版本。单击的每个点都需要显示另一个点并隐藏另一个点，因此您看不到其他块文本等。我​​已经尝试使用复制粘贴的 jquery 函数进行类似操作，但它仅适用于 1 次单击，之后该函数停止. 所以我的问题是让这个工作的最佳方法是什么？

HTML：

<div class="CalculatorRight" style="padding-bottom: 11px;">
  <div class="DefaultSummary" id="schermpje1">
    <h1 style="text-align:center;">yeet1</h1>
    <!-- dots -->
    <div style="text-align:center; float:middle bottom;position: absolute;bottom:0;left: 141px;">
      <span id="dot1" class="dot"></span>
      <span id="dot2" class="dot"></span>
      <span id="dot3" class="dot"></span>
    </div>
  </div>

  <div class="CalculatorRight">
    <div class="DefaultSummary" id="schermpje2" style="display:none">
      <h1>yeet2</h1>
      <!-- dots -->
      <div style="text-align:center; float:middle bottom;position: absolute;bottom:0;left: 141px;">
        <span id="dot1" class="dot"></span>
        <span id="dot2" class="dot"></span>
        <span id="dot3" class="dot"></span>
      </div>
    </div>

    <div class="CalculatorRight">
      <div class="DefaultSummary" id="schermpje3" style="display:none">
        <!-- form -->
        <!-- <div class="row">
           <form class="col s12">
             <div class="row">
               <div class="input-field col s6">
                 <input placeholder="Placeholder" id="first_name" type="text" class="validate">
                 <label for="first_name">First Name</label>
               </div>
               <div class="input-field col s6">
                 <input id="last_name" type="text" class="validate">
                 <label for="last_name">Last Name</label>
               </div>
             </div>
           </form>
         </div> -->
         <!-- form -->
         <h1>yeet3</h1>
         <!-- dots -->
         <div style="text-align:center; float:middle bottom;position: absolute;bottom:0;left: 141px;">
           <span id="dot1" class="dot"></span>
           <span id="dot2" class="dot"></span>
           <span id="dot3" class="dot"></span>
         </div>
     </div>
    </div>
  </div>
</div>

如果我按下其中一个点，我希望它在 Defaultsummary 之间切换。

试过这个，但在使用 1 次后停止工作：

$(function() {
      $('#dot1').on('click', function() {
        $('#schermpje1').show();
        $('#schermpje2').hide();
        $('#schermpje3').hide();
      })

      $('#dot2').on('click', function() {
        $('#schermpje2').show();
        $('#schermpje3').hide();
        $('#schermpje1').hide();
      })
        $('#dot3').on('click', function() {
        $('#schermpje3').show();
        $('#schermpje2').hide();
        $('#schermpje1').hide();
      })
    });

标签： jqueryhtml

Answer 1

$(document).on('click','#dot1',function(){
     $('#schermpje1').show();
     $('#schermpje2, #schermpje3').hide();
});

$(document).on('click','#dot2',function(){
    $('#schermpje2').show();
    $('#schermpje1, #schermpje3').hide();
});

$(document).on('click','#dot3',function(){
    $('#schermpje3').show();
    $('#schermpje1, #schermpje2').hide();
});