我如何在$ .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的作用域只是click函数，但您似乎正在尝试从全局作用域（锚点的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";
        }
    });
});