如何在 $.click (jquery) 中创建一个使用 $.click 中的 id 的函数

Question

所以，我认为，我的标题不太容易理解。 我有这个 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").click 事件中的变量的函数。这个变量是 id = $(this).attr('id');所以我想在里面创建函数。显然它不能这样工作，所以我需要一点帮助。

对不起，如果你不明白我的意思。我对这种编码很陌生:(

我使用 slideDo 的 HTML

<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 的作用域只是点击函数，但您似乎正试图从全局作用域（锚点的onclick 属性）调用它。您需要将函数分配给全局变量。

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