1

この質問に続いて:
FancyZoom ポップアップ内で JQuery を使用できませんか?

その質問に対する 2 つの回答により問題が解決Hello Worldされ、FancyZoom ポップアップ内でアラートが一貫して発生するようになりました。

ただし、実際に行う必要があるのは、アラートを発生させるのではなく、代わりに img の src を変更することです。

ここに私たちが持っているものがあります：

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/fancyzoom.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $(document).on('click', '#foo', function() { $('#foo').attr('src', 'i/image2.png'); alert('hello world'); });
    });
</script>
</head>

<body>
              <div id="Container">
                  <a id="myFancyZoomPopup" href="#Test"><span>test</span></a>
                  <div id="Test">
                      <p> this is some text in the popup</p>
                      <img id="foo" src="i/image1.png" />
                  </div>

                    <script type="text/javascript">
                        $('#myFancyZoomPopup').fancyZoom({ directory: 'i'});
                    </script>
                </div>
</body>
</html>

「Hello World」は起動していますが、画像ソースは からimage1.pngに変化していませんimage2.png。

4

3 に答える 3

2

src従来の方法で設定してみることができます:

<script type="text/javascript">
    $(document).ready(function() {
        $(document).on('click', '#foo', function() { 
          this.src = 'i/image2.png'; 
          alert('hello world'); 
        });
    });
</script>
于 2012-05-04T15:18:18.927 に答える
2

クラスを使用して、dom が getElementById エラーにあまり敏感にならないようにしてから、クリック時に $(this).attr を更新して、クリックされた要素をターゲットにするようにしてください。

<script type="text/javascript">
    $(document).ready(function() {
         $(document).on('click', '.foo', function() { $(this).attr('src', 'i/image2.png'); alert('hello world'); });
    });
</script>

<img class="foo" src="i/image1.png" />
于 2012-05-04T15:26:11.460 に答える
0

propメソッドを使用して実際の値を変更する必要があります。attr新しい jQuery バージョンでは機能が異なります。

$('#foo').prop('src', 'newimg.png');
于 2012-05-04T15:19:29.780 に答える