jqueryのスワップイメージが要素のクリックで機能しない - javascript、jquery、html

jqueryでクリック時に画像を交換しようとしています。 画像クラスにバインドされているクリックで動作するようにしました。ただし、関数をラップしてイベントをボタンまたはアンカーにバインドしようとすると、画像は交換されません。 jqueryは次のとおりです。

<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$(".test_toggle").click(function(){
$(this).find(".img-swap").live("click", function() {
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});
});
</script>

これはうまくいった：

jQuery(document).ready(function( $ ) {
$(".img-swap").live("click", function() {
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});

どんな助けでも大歓迎です。

回答：

イベントリスナーを委任する必要がないと思うので、イベントリスナーを削除しました。クリックイベントを画像に追加するだけで、手動でクリックをトリガーできます。 .test-toggle クリックされます。例えば：

$(function() {

//add on click event
$(".img-swap").on("click", function() {
if (this.src.indexOf("_off")>0) {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
});

//add remote trigger
$(".test_toggle").on("click", function(){
$(".img-swap").trigger("click");
});

});

<script src="/images/https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img-swap" src="/images/https://placehold.it/300?text=_off" />
<button class="test_toggle">test toggle</button>

それは好きじゃないから img.

a または button それはない src 属性。

したがって、イベントをボタンまたはアンカーにバインドすると、 this.src コードの2番目のインスタンスでは無効になります。

私はこの行を削除します：

 $(this).find(".img-swap").live("click", function() {

目的は何ですか？最初のクリックの直後にこの画像を交換できますか？ また、 .img-swap クラスを持つタグ内 test_toggle。 あなたが使用しています：

$(this).find(".img-swap")

find() 選択した要素の子のみを検索します。

ネストされていない場合

$(".img-swap")

の代わりに：

 $(this).find(".img-swap")

jsを書き直しましたが、テストしていません。クリックをネストできますか？

$(".test_toggle").click(function(){
$.find(".img-swap").click(function(){
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});