jquery swap image на елемент клацання не функціонує - 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");
});
});

Будь-яка допомога дуже вдячна.

Відповіді:

Я не думаю, що є необхідність делегувати слухачів подій, тому я їх видалив. Просто додайте подію click до зображення, і тоді ви можете вручну "викликати" клацання по ній, коли .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 у вашому другому екземплярі код буде недійсним.

Я б видалив цей рядок:

 $(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");
});
});