gpt4 book ai didi

javascript - 必须在 jQuery 上单击两次

转载 作者:行者123 更新时间:2023-11-28 02:06:11 25 4
gpt4 key购买 nike

嗨。我有以下代码,也可以在这里看到:http://designliving.tk/test.html当您单击“查看 360”时,<div>如您所见,文本会发生变化。

当您点击“这是一张图片”时,它应该将其重置回“View 360”。

现在唯一的问题是,当您点击“这是一张图片”时,您必须点击“360 度 View ”两次才能再次更改 DIV。

它应该在第一次点击时改变。我曾尝试重新安排我的代码,但没有成功。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#toggleDiv').toggle(function() {
$('#imgThree').show();
$('#imgNorm').hide();
$(this).html('<a href="#">View Normal</a>');
}, function() {
$('#imgThree').hide();
$('#imgNorm').show();
$(this).html('<a href="#">View 360</a>');
});
$('#changeDiv').click(function() {
$('#imgThree').hide();
$('#imgNorm').show();
$('#toggleDiv').html('<a href="#">View 360</a>');
});
});
</script>

<style type="text/css">
#imgThree {
display: none;
}
</style>
</head>
<body>
<div id="toggleDiv"><a href="#">View 360</a></div>
<br>
<br>
<div id="imgNorm">Normal Product Image Here</div>
<div id="imgThree">360 Spin Image Here</div>
<br>
<br>
<div id="changeDiv">
<a href="#">This is an image</a><br>
<a href="#">This is an image</a><br>
<a href="#">This is an image</a>
</div>
</body>
</html>

谢谢大家的帮助。

最佳答案

$(document).ready(function(){
hide = function(){
$('#imgThree').hide();
$('#imgNorm').show();
$('#toggleDiv').html('<a href="#">View 360</a>');
}
$('#toggleDiv').toggle(function() {
$('#imgThree').show();
$('#imgNorm').hide();
$(this).html('<a href="#">View Normal</a>');
}, hide);
$('#changeDiv').click(function(){
if($('#imgThree:hidden').length > 0){
$('#toggleDiv').trigger('click');
}
});
});​

http://jsfiddle.net/HV39C/

关于javascript - 必须在 jQuery 上单击两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11422378/

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