jQuery функция загрузки по клику работает только один раз - PullRequest
Новая
       0

jQuery функция загрузки по клику работает только один раз

0 голосов
/ 04 апреля 2020

Я пытаюсь сделать группу кнопок, они скрыты по умолчанию. Когда один из них активирован, он должен ...
- показать контейнер - отправить значения в PHP контейнер - загрузить результат в тот же контейнер

Проблема в том, что работает только один раз, потому что если вы нажмете другую кнопку, он только покажет свой контейнер и скроет остальные, но не отправит значения или не загрузит 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>

1 Ответ

0 голосов
/ 04 апреля 2020

Onclick получает наш следующий элемент этого класса, устанавливает тикер, и когда вы перебираете клики, тикер меняет значение вашего тега id, чтобы вы могли получить его для отображения загруженного раздела. Хотя вы не можете отобразить нагрузку в фрагменте кода, вам нужно добавить этот бит на своем конце. Я показываю загрузку некоторых и показываю скрытые элементы на каждой вновь отображаемой кнопке. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...