2

你好。我有以下代码，也可以在这里看到：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>

谢谢大家的帮助。

4

1 回答 1

1 
$(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/

于 2012-07-10T21:48:28.363 回答