Question

继续这个问题：
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。

Answer 1

您可以尝试以传统方式设置src：

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

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

Answer 3

您需要使用prop方法更改实际值; attr在较新的jQuery版本中具有不同的功能：

$('#foo').prop('src', 'newimg.png');

jQuery“alert”会激活，但设置img“src”会被忽略？

3 个答案: