Javascript 如何在$.click（jquery）中创建一个使用$.click中id的函数

所以，正如我所想，我的标题不太容易理解。 我有这个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";
    }
});

我的问题是，我想创建一个使用$（“img.slideimg”）变量的函数。单击事件。这个变量是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

名称的范围

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

var slideDo=function（）{}；//最初什么都不做
$（文档）.ready（函数（）{
$（“img.slideimg”）。单击（函数（）{
var id=$（this.attr（'id'）；
$（（.img.previewimg.+id）.css（{“display”：“block”}）；
$（“div.imgpreview”）.css（{“display”：“flex”}）；
slideDo=函数（n）{
var i；
var aux=id-1+n；
var slidesp=document.getElementsByClassName（“previewimg”）；
如果（aux>slidesp.length）{aux=1}
如果（aux<1）{aux=slidesp.length}
对于（i=0；i

为什么函数在click中？也就是说，它不是全局范围。您在哪里调用

slideDo（）

？@epascarello显然可以使用

var

变量。这听起来很像。向我们展示一些相关的html结构。@charlietfl我现在在帖子中添加了html确实看起来很难看，只是为了访问一个id，这个id可能很容易通过遍历、活动类或其他自包含的方法获得means@charlietfl我同意这不是我应该怎么做的。但我不想为这个答案完全重新设计他的应用程序。

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