jQuery“alert”触发但设置img“src”被忽略？

从这个问题继：
Can't I use JQuery inside my FancyZoom popup?jQuery“alert”触发但设置img“src”被忽略？

两个答案，这个问题解决了这一问题，使我们的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。

来源

2012-05-04 hawbsl

你试过this.src ='我/ image2.png'？而不是重新选择触发点击的元素？ – scrappedcola

根据http://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery，“attr”应该工作。 –

我的猜测是myFancyZoomPopup正在创建一个div的克隆，然后你的图像实际上正在更新，它只是不是在幻想缩放弹出框中可见的那个 – Bryan

尝试使用类，使DOM不那么敏感的getElementById错误，然后单击时，更新$（本）.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-04 15:26:11 Bryan

工作！谢谢 – hawbsl

使用类来使dom对getElementById错误不那么敏感是什么意思？为什么你不能使用ID？ –

你可以使用一个ID，但假设有多个奇特的缩放框被创建，为什么DOM应该知道你通过ID获得了哪个元素，如果有多个？这就像搜索一个社会安全号码，找到多个号码，期待自己确切地知道哪一个是正确的 – Bryan

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

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

来源

2012-05-04 15:18:18 Sampson

尝试与您的变化（尝试@BryanMoyles后）的作品呢...谢谢！尽管我想我明白为什么@BryanMoyles的建议有效，但我不知道我是否理解_why_您的修改会修复它。何哼，现在我有两个解决方案。 – hawbsl

这正是'.prop'在后台执行的操作。 –

@hawbsl我们的两个解决方案都是指触发事件的对象，而不是尝试查找。Mine使用可用的原始JavaScript变量，而@BryanMoyles的解决方案使用jQuery对象作为“src”属性的路径。 – Sampson

你可能会需要使用prop方法来改变实际值; attr有新的jQuery版本不同的功能：

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

来源

2012-05-04 15:19:29 Tejs

真的吗？ http://jsfiddle.net/azizpunjani/4mGzU/ –

@Interstellar_Coder'$ .prop'和'$ .attr'确实是不同的：http://api.jquery.com/prop/ – Sampson

根据文档，attr '现在用于指定HTML属性VS实际的底层DOM属性。具体的浏览器可能会以不同的方式处理，但这并不会导致错误。 – Tejs

jQuery“alert”触发但设置img“src”被忽略？

回答

相关问题