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

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

上点改变的div jQuery的点击

1 个答案: