2

やあ。次のコードは、ここでもライブで見る<div>ことができます。

「これは画像です」をクリックすると、「View 360」にリセットされます。

唯一の問題は、「これは画像です」をクリックしたときに、「360度表示」を2回クリックして、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 に答える