1

从这个问题开始：
Can't I use JQuery inside my FancyZoom popup?

该问题的两个答案解决了这个问题，以便我们的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 回答