jQueryの「警告」は発生しますが、img「src」の設定は無視されますか？

この質問に続き：問題を修正し、その質問に
Can't I use JQuery inside my FancyZoom popup?jQueryの「警告」は発生しますが、img「src」の設定は無視されますか？

2つの答えをするように一貫当社FancyZoomポップアップ内の当社Hello Worldのアラートが発生します。

しかし、私たちが本当にやるべきことは、警告を発しない代わりに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」が発射されたが、画像ソースはimage2.pngへimage1.pngから変更されていません。

出典

2012-05-04 hawbsl

this.src = 'i/image2.png'を試してみましたか？クリックを引き起こした要素を再選択するのではなく、 – scrappedcola

http://stackoverflow.com/questions/554273/changing-the-image-source-using-jqueryによると、 'attr'は動作するはずです。 –

私の推測では、myFancyZoomPopupがdivのクローンを作成していて、画像が実際に更新されていると思います。 – Bryan

はgetElementByIdをエラーにDOMはそれほど敏感ではないにし、そしてクリックすると、その後、$（this）を更新するためのクラスを使用してみてください.ATTRので、クリックされた要素

をターゲットにしています。 attrは新しいjQueryのバージョンで異なる機能を持っています

<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

'getElementByIdエラーにあまり敏感でないdomを作るためにクラスを使用しています 'とはどういう意味ですか？ IDを使用できないのはなぜですか？ –

IDを使用することはできますが、複数の空想的なズームボックスが作成されたとします。複数のIDがある場合は、IDで取得している要素をDOMが知っている必要があります。社会保障番号の検索、複数の検索、正しいものがどれかを正確に知ること – 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の提案がうまくいくのか理解していると思うのですが、あなたの変更がそれを修正しているかどうか分かりません。 Hoのハム、よく今私はソリューションを持っています。 – hawbsl

これは '.prop'がバックグラウンドで行うこととまったく同じです。 –

@hawbsl私たちのソリューションはどちらも、ルックアップを試みるのではなく、イベントを引き起こしたオブジェクトを参照しています。Mineは未処理のJavaScript変数を使用しますが、@ BryanMoylesのソリューションではjQueryオブジェクトが 'src'プロパティへの経路として使用されます。 – Sampson

あなたが実際の値を変更するにはpropメソッドを使用する必要があります。

$('#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 'は、実際の基礎となるDOMプロパティのHTML属性VSを指定するために使用されます。特定のブラウザではそれとは異なる処理が行われることがありますが、それはそれほど真実ではありません。 – Tejs

jQueryの「警告」は発生しますが、img「src」の設定は無視されますか？

答えて

関連する問題