如何在使用$ .click

Question

中的ID的$ .click（jquery）中創建一個函數。因此，我認爲我的標題不是很容易理解。 我有這樣的jQuery代碼：

$("img.slideimg").click(function(){ 
    var id = $(this).attr('id'); 
    $("img.previewimg." + id).css({"display": "block"}); 
    $("div.imgpreview").css({"display": "flex"}); 

    function slideDo(n) { 
     var i; 
     var aux = id - 1 + n; 
     var slidesp = document.getElementsByClassName("previewimg"); 
     if (aux > slidesp.length) {aux = 1} 
     if (aux < 1) {aux = slidesp.length} 
     for (i = 0; i < slides.length; i++) { 
     slidesp[i].style.display = "none"; 
    } 
    slidesp[aux-1].style.display = "block"; 
    } 
}); 

的問題是，瀏覽器控制檯輸出是這樣的：

Uncaught ReferenceError: slideDo is not defined 
at HTMLAnchorElement.onclick (index.html:85) 

我的問題是，我想創建一個使用變量從$函數（ 「img.slideimg」）。點擊事件。這個變量是id = $（this）.attr（'id'）;所以我想到了在裏面創建函數。顯然它不能這樣工作，所以我需要一點幫助。

對不起，如果你不明白我。我是很新，這種編碼:(

HTML這裏我使用slideDo

<div class="middle"> 
    <a class="prev" onclick="slideDo(-1)"> ❮ </a> 
    <div class="imglink"> 
    <img src="img/dailyui/008.png" class="previewimg 1"> 
    <img src="img/dailyui/007.jpg" class="previewimg 2"> 
    <img src="img/dailyui/006.jpg" class="previewimg 3"> 
    <img src="img/dailyui/003.jpg" class="previewimg 4"> 
    </div> 
    <a class="next" onclick="slideDo(1)"> ❯ </a> 
</div> 

的所以我想做的事： 我有一個幻燈片，當我點擊一張圖片，這裏是我的代碼的演示網站：beta.eduardstefan.com

Answer 1

作用域的範圍在這裏我有另一個按鈕爲下一個/上一個圖片，但它們似乎並不工作。名稱slideDo只是點擊功能，但它似乎是你試圖從全球範圍內調用它（錨的屬性）。您需要將該函數分配給全局變量。

var slideDo = function() {}; // initially does nothing 

$(document).ready(function() { 
    $("img.slideimg").click(function(){ 
     var id = $(this).attr('id'); 
     $("img.previewimg." + id).css({"display": "block"}); 
     $("div.imgpreview").css({"display": "flex"}); 

     slideDo = function(n) { 
      var i; 
      var aux = id - 1 + n; 
      var slidesp = document.getElementsByClassName("previewimg"); 
      if (aux > slidesp.length) {aux = 1} 
      if (aux < 1) {aux = slidesp.length} 
      for (i = 0; i < slides.length; i++) { 
      slidesp[i].style.display = "none"; 
     } 
     slidesp[aux-1].style.display = "block"; 
     } 
    }); 
});