0

ニーズに合わせてプラグインをカスタマイズしようとしています。私がやろうとしているのは、画像のコレクションから画像をクリックすると、画像の src を取得し、その画像でプラグインを復元することです。私が遭遇した問題は、画像のソースを取得したときに、実際のソースではなく [object object] が表示されることでした。$(this).attr("src") を使用して画像ソースを取得しました。

したがって、基本的に私のコードは次のようになります。

    <div id="images">
      <img src="image1"/>
      <img src="image2"/>
      <img src="image3"/>
      <img src="image4"/>
    </div>

$(document).ready(function(){
  $("#images img").on("click", function(){
    var img_src=$(this).attr("src");
    $("#id").plugin({
      image:img_src
    });
});
});

編集:コードを更新して、私が求めていることをより明確にしました。

更新: 実際には、コードから他のすべての js を削除しても、コードは機能しません。しかし、それはjsfiddleで動作します

更新 2: インターネットで解決策を探していたのですが、使用しているプラ​​グインが何らかの形で attr 関数をオーバーライドしているようです。そうならないようにする方法はありますか？それとも、プラグインの影響を受けない jQuery のインスタンスを作成しますか?

4

3 に答える 3

2

コンソールに出力して、そのオブジェクトの内容を調べてみてください。

Firebug for Firefox または Chrome 統合開発者コンソールを F12 で使用します。

コンソールを開き、コードを変更します。

var img_src=$(this).attr("src");
console.log(img_src);
$("#id").plugin({
  image:img_src
});

そして、出力を調べます。

$("img").attr("src")文字列でなければなりません。

于 2013-02-04T07:55:16.147 に答える
1

これは実際には CSS セレクターの問題です。

期待どおりに機能しないため、#images img機能しません!!! idimg#imagesで参照する必要があります。imgimages

したがって、次のような HTML がある場合:

<img id="img1" class="useImg" src="http://fc01.deviantart.net/fs71/f/2013/032/8/3/papa_happy_by_ovilia1024-d5tfw0h.png" width="30px" height="30px" />
<img id="img2" class="useImg" src="http://fc01.deviantart.net/fs70/f/2013/032/a/b/papa_horrified_by_ovilia1024-d5tfwdt.png" width="30px" height="30px" />

以下を使用する必要があります。

$('img.useImg').on('click', function() {
    alert($(this).attr('src'));
});

ここでデモを実行します: http://jsfiddle.net/aM4xw/2/

于 2013-02-04T08:07:02.440 に答える
0

attr がソース値ではなくオブジェクトを返す理由は、使用していたプラグインが attr 関数をオーバーライドしたためです。src をオブジェクトではなく文字列として返すように変更しました。それを削除しても問題は解決しましたが、プラグインにはカスタムのものが必要でした。私を助けようとしてくれた皆さんに感謝し、本当に感謝しています。

于 2013-02-04T09:53:32.830 に答える