jquery交換圖像的元素點擊不起作用

我想交換圖像點擊jQuery的。我已經得到它與點擊綁定到圖像類的工作。但是，如果我嘗試打包函數並將事件綁定到按鈕或錨點，它將不會交換圖像。這裏是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"); 
    }); 
});

任何幫助是極大的讚賞。

來源

2015-11-03 m33bo

現場已被棄用，刪除。你使用的是什麼舊版本的jQuery？將事件綁定到另一個點擊通常是一個壞主意，因爲多次點擊會添加多個事件處理程序。 – epascarello

嘗試將'$（this）.find'更改爲'$ .find'，我認爲您正在搜索按鈕內的圖像。無法驗證它，但這只是在通勤期間查看您的代碼:) –

我不完全理解你想達到的目標。目前你的代碼表示「點擊.test-toggle向.img-swap添加一個事件監聽器」 – Moob

我不認爲有任何需要委託事件監聽器，所以我已經刪除它們。只需將點擊事件添加到圖像，然後點擊.test-toggle時，您可以手動「觸發」點擊。 E.G：

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

來源

2015-11-03 16:36:44 Moob

工程很棒。meeb0表示感謝@moob :) – m33bo

那是因爲不像img。

a或button沒有src屬性。

因此，當您將事件綁定到按鈕或錨點時，代碼的第二個實例中的this.src將無效。

來源

2015-11-03 16:11:58

我會刪除此行：

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

什麼是它的目的是什麼？您可以在第一次點擊後立即交換此圖片，對吧？此外，請確保.img-swap位於標記的類test_toggle。您正在使用：

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

find()搜索只能在選定的元素的兒童。

如果它不嵌套使用

$(".img-swap")

代替：

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

來源

2015-11-03 16:14:23

我已經重新編寫的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"); 
    }); 
});

來源

2015-11-03 16:22:46 m33bo

不，你不能 - 你爲什麼？交換應該發生在點擊上。你可以放棄整個'if'陳述。點擊後，您搜索並更換源代碼:) –

jquery交換圖像的元素點擊不起作用

回答

相關問題