gpt4 book ai didi

javascript - jQuery - 单击然后显示功能,然后再次单击并显示另一个功能,依此类推。未单击并显示所有功能

转载 作者:行者123 更新时间:2023-12-02 14:31:21 26 4
gpt4 key购买 nike

我正在尝试实现以下目标:当我单击该段落时,我的第一个函数将运行,然后再次单击该段落,第二个函数将运行,然后再次单击该段落,第三个函数将运行,依此类推。当我单击该段落时,所有功能都会运行,我只实现了第二个功能,现在我陷入困境。

这是代码..

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/1.12.2/jquery.min.js"></script>
<script>
$().ready(function(){
$("h1").hide();
$("h2").hide();
$("h3").hide();

function func1(){
$("h1").show();
}
function func2(){
$("h2").show();
}

function func3(){
$("h3").show();
}

function funcme(){
if($("p").click(func1)){

$("h1").show();
$(this).click(func2);
}

}
$(this).click(func3);
$("p").click(funcme);

});

</script>
</head>
<body>

<p>CLICK ME</p>
<h1>FUNC 1</h1>
<h2>FUNC 2</h1>
<h3>FUNC 3</h1>

</body>
</html>

最佳答案

这可能是一个更优雅的解决方案?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$().ready(function(){
var counter = 0;

$('.section').hide();


$(".func-me").on('click', function (event){
$('.section').eq(counter).show();
counter++;
});
});

</script>
</head>
<body>


<button class="func-me">CLICK ME</button>
<p class="section">FUNC 1</p>
<p class="section">FUNC 2</p>
<p class="section">FUNC 3</p>

</body>
</html>

https://jsfiddle.net/vnavv1v7/

关于javascript - jQuery - 单击然后显示功能,然后再次单击并显示另一个功能,依此类推。未单击并显示所有功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37794440/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com