jQuery点击加载功能只工作一次

我尝试制作一组按钮，默认情况下它们是隐藏的。当其中一个被激活时，它们必须…
-显示容器-将值发送到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>

Onclick获取该类的下一个元素，设置一个ticker，当你迭代点击时，ticker会更改你的标签id的值，这样你就可以获得它来显示你加载的部分。虽然无法在snippit中显示负载，但您需要在您的端部添加该位。我展示了加载一些并在每个新显示的按钮上显示隐藏元素。

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>

相关内容

最新更新

热门标签：