jQuery 点击加载 function 只工作一次

Question

我尝试制作一组按钮，默认情况下它们是隐藏的。 当其中一个被激活时，他们必须...
- 显示一个容器 - 将值发送到 PHP 容器中 - 将结果加载到同一个容器中

问题是它只能工作一次，因为如果您按下另一个按钮，它只会显示其容器并隐藏 rest 但它不会发送值或将 PHP 加载到容器中。

这是我的代码，我使用的是 jQuery 3.4.1：

<script>
  $(document).ready(function(e) {
    $('#grafi').hide();
    $('#g1').hide();
    $('#g2').hide();
    $('#g3').hide();
    $('#g4').hide();

    $('#btn0').click(function(e) {
      $('#grafi').show();
      valor1 = $('#year1').val();
      valor2 = $('#year2').val();
      valor3 = $('#year3').val();

      $("#tabla").load('tablas.php', {
        valor1,
        valor2,
        valor3
      });
      return false;
    });

    // button section that only works once 
    $('#btn1').click(function(e) {
      $('#g1').show();
      $('#g2').hide();
      $('#g3').hide();
      $('#g4').hide();
      valor1 = $('#year1').val();
      valor2 = $('#year2').val();
      valor3 = $('#year3').val();
      $("#g1").load('graficasComGLP.php', {
        valor1,
        valor2,
        valor3
      });
    });

    $('#btn2').click(function(e) {
      $('#g1').hide();
      $('#g2').show();
      $('#g3').hide();
      $('#g4').hide();
      valor1 = $('#year1').val();
      valor2 = $('#year2').val();
      valor3 = $('#year3').val();
      $("#g2").load('graficasComG.php', {
        valor1,
        valor2,
        valor3
      });
    });

    $('#btn3').click(function(e) {
      $('#g1').hide();
      $('#g2').hide();
      $('#g3').show();
      $('#g4').hide();
      valor1 = $('#year1').val();
      valor2 = $('#year2').val();
      valor3 = $('#year3').val();
      $("#g3").load('graficasComD.php', {
        valor1,
        valor2,
        valor3
      });
    });

    $('#btn4').click(function(e) {
      $('#g1').hide();
      $('#g2').hide();
      $('#g3').hide();
      $('#g4').show();
      valor1 = $('#year1').val();
      valor2 = $('#year2').val();
      valor3 = $('#year3').val();
      $("#g4").load('graficasComE.php', {
        valor1,
        valor2,
        valor3
      });
    });
  });
</script>

<html>
  <div align="center" id="grafi">
    <button id="btn1" class="btn btn-primary">Graf GLP</button>
    <button id="btn2" class="btn btn-primary">Graf Gas</button>
    <button id="btn3" class="btn btn-primary">Graf Diesel</button>
    <button id="btn4" class="btn btn-primary">Graf Elect</button>
  </div>
  <br>
  <div align="center" id="g1">1</div>
  <div align="center" id="g2">2</div>
  <div align="center" id="g3">3</div>
  <div align="center" id="g4">4</div>
</html>

Answer 1

Onclick 获取 class 的下一个元素，设置一个代码，当您遍历点击时，代码会更改标签 ID 的值，以便您可以获取它来显示加载的部分。 虽然无法在 snipit 中显示负载，但您需要在最后添加该位。 我展示了在每个新显示的按钮上加载一些并显示隐藏元素。

 var i = 1; $('.btn').each(function() { $(this).on('click', function(){ $(this).prop( "disabled", true ); $(this).next().css("display", "inline-block"); $("#year" + i).each(function(index,value) { $(this).css("display", "inline-block"); }); i++; }); });

 #btn2, #btn3, #btn4, #year1, #year2, #year3, #year4 { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div align="center" id="grafi"> <button id="btn1" class="btn btn-primary">Graf GLP</button> <button id="btn2" class="btn btn-primary">Graf Gas</button> <button id="btn3" class="btn btn-primary">Graf Diesel</button> <button id="btn4" class="btn btn-primary">Graf Elect</button> </div> <br> <div align="center" class="g" id="g1"></div> <div align="center" class="g" id="g2"></div> <div align="center" class="g" id="g3"></div> <div align="center" class="g" id="g4"></div> <div class="year" id="year1">1994</div> <div class="year" id="year2">2003</div> <div class="year" id="year3">1776</div> <div class="year" id="year4">1984</div>

jQuery 点击加载 function 只工作一次

问题描述

1 个解决方案

解决方案1
0 2020-04-04 09:19:43

jQuery 点击加载 function 只工作一次

问题描述

1 个解决方案

解决方案1 0 2020-04-04 09:19:43

解决方案1
0 2020-04-04 09:19:43