必须在jQuery上单击两次

Have to click twice on jQuery

本文关键字：两次 单击 jQuery      更新时间：2023-09-26

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

当你点击"这是一个图像"时，它应该将其重置回"查看360"，它确实这样做了。

现在唯一的问题是，当你点击"这是一个图像"时，你必须点击两次"查看360"才能再次更改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/

相关文章：