Question

您好。我还可以在此处看到以下代码：http://designliving.tk/test.html当您点击＆＃34;查看360＆＃34;您可以看到<div>和文字更改。

点击＆＃34;这是一张图片＆＃34;它应该重新设置回＆＃34;查看360＆＃34;它做的。

现在唯一的问题是当你点击＆＃34;这是一张图片＆＃34;你必须点击＆＃34;查看360＆＃34;两次让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>

谢谢大家的帮助。

Answer 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/

必须在jQuery上单击两次

1 个答案: