Fatal编程技术网
  • javascript/
  • Javascript 自定义jquery函数中的参数能否更改全局变量的值

Javascript 自定义jquery函数中的参数能否更改全局变量的值

javascript jquery variables

Javascript 自定义jquery函数中的参数能否更改全局变量的值,javascript,jquery,variables,scope,global,Javascript,Jquery,Variables,Scope,Global,拜托，我是jquery和javascript的初学者。我正在尝试创建一个函数，我将在页面上重复使用该函数，该函数基本上循环放置在容器中的子元素。代码在我看来还可以,但在调用函数时,当我传递一个全局变量作为参数时,它并没有像预期的那样工作。我知道有一个更好的方法可以做到这一点，我想知道我是如何做到的，哪里弄错了，或者我是否应该使用插件来代替。谢谢 //THE JAVASCRIPT var prevIndex = 0, nextIndex = 1;//these are the global var

拜托，我是jquery和javascript的初学者。我正在尝试创建一个函数，我将在页面上重复使用该函数，该函数基本上循环放置在容器中的子元素。代码在我看来还可以,但在调用函数时,当我传递一个全局变量作为参数时,它并没有像预期的那样工作。我知道有一个更好的方法可以做到这一点，我想知道我是如何做到的，哪里弄错了，或者我是否应该使用插件来代替。谢谢

//THE JAVASCRIPT
var prevIndex = 0, nextIndex = 1;//these are the global variables

var imgBox = $("#img-box");//the parent container

function changeSlides(parentName, a1, b1, classInit, classFinal){
    var parentName, 
    classInit, 
    classFinal, 
    allChildren = parentName.children(), 
    prevSlide = allChildren.eq(a1), 
    nextSlide = allChildren.eq(b1), 
    allChildrenNum = allChildren.length, 
    lastSlideIndex = allChildrenNum - 1, 
    lastSlideElem = allChildren.eq(lastSlideIndex), 
    firstSlideElem = allChildren.eq(0);

    if(b1<=lastSlideIndex){
        changeClass(prevSlide,classFinal,classInit);//this is function     changes the class of the selected element from classFinal to classInit and vice     versa
        changeClass(nextSlide,classInit,classFinal);
        a1++;
        b1++;
    }else if(b1>lastSlideIndex){
        a1 = 0;
        b1 = a1 + 1;
        changeClass(firstSlideElem, classInit, classFinal);
        changeClass(lastSlideElem, classFinal, classInit);
    };
};

function changeClass(elemName, class1, class2){
    var class1,
        class2;
    if(elemName.hasClass(class1)){
        elemName.removeClass(class1).addClass(class2);
    };
};


$("button").click(function(){
    changeSlides(imgBox,prevIndex,nextIndex,"show","hide");
});


//THE HTML
<html>
    <body>
        <div id="img-box">
            <img src="img1.jpg" class="show">
            <img src="img2.jpg" class="hide">
            <img src="img3.jpg" class="hide">
        </div>
        <button></button>
    </body>
</html>

//THE CSS
.show{opacity: 1;}
.hide{opacity: 0;}

//JAVASCRIPT
var prevIndex=0，nextIndex=1//这些是全局变量
var imgBox=$（“#img框”）//父容器
函数更改幻灯片（parentName、a1、b1、ClassUnit、classFinal）{
var parentName，
古典主义，
期末考试，
allChildren=parentName.children（），
prevSlide=所有儿童。等式（a1），
nextSlide=所有儿童的eq（b1），
allChildrenNum=allChildren.length，
lastSlideIndex=allChildrenNum-1，
LastSlideLem=allChildren.eq（lastSlideIndex），
firstslidelem=allChildren.eq（0）；
如果（b1lastSlideIndex）{
a1=0；
b1=a1+1；
changeClass（第一个SlideLem、classInit、classFinal）；
changeClass（LastSlideLem、classFinal、classInit）；
};
};
函数更改类（元素名，类1，类2）{
变量1，
类别2；
if（elemName.hasClass（class1））{
elemName.removeClass（class1）.addClass（class2）；
};
};
$（“按钮”）。单击（函数（）{
更改幻灯片（imgBox、prevIndex、nextIndex、“显示”、“隐藏”）；
});
//HTML
//CSS
.show{opacity:1；}
.hide{opacity:0；}
您正在将全局变量作为函数参数传递，并在函数中修改它们。这只会更改函数参数值，而不会更改全局变量，因为函数参数被视为局部变量。对于常量值
show
和
hide
，也同样如此，您不需要通过函数参数传递它们，只要在需要的地方使用它们即可

使用全局参数时，不必将它们传递到函数中。这就是全局参数背后的全部思想，它们是全局的

其次，您需要使用
jQuery
（或
$
）来访问元素。因此，由于我不确定您到底想要实现什么，您可以从以下代码开始：

var-prevIndex、nextIndex、imgBox；
prevIndex=0；
nextIndex=1；
imgBox=jQuery（“img框”）；
函数changelides（）{
变量allChildren、prevSlide、nextSlide、allChildrenNum、lastSlideIndex、LastSlideLem、FirstSlideLem；
allChildren=imgBox.children（）；
prevSlide=jQuery（所有子项）.eq（prevIndex）；
nextSlide=jQuery（allChildren）.eq（nextIndex）；
allChildrenNum=allChildren.length；
lastSlideIndex=allChildrenNum-1；
LastSlideLem=jQuery（所有子项）.eq（lastSlideIndex）；
firstSlideLem=jQuery（所有子项）.eq（0）；
if（下一个索引lastSlideIndex）{
prevIndex=0；
nextIndex=1；
changeClass（第一个SlideLem）；
changeClass（LastSlideLem）；
};
};
函数类（元素）{
var elementIsShown=jQuery（element）.hasClass（“显示”）；
如果（元素显示）{
jQuery（element）.removeClass（“show”）.addClass（“hide”）；
}否则{
jQuery（element）.removeClass（“隐藏”）.addClass（“显示”）；
};
};
$（“按钮”）。单击（函数（）{
更改幻灯片（）；
});

.show{
不透明度：1；
}
.隐藏{
不透明度：0；
}


如果您想在页面上使用多个容器，可以尝试使用类。请尝试以下代码：



函数更改SlideClass（boxName，btnName）{
该指数=0；
this.nextIndex=1；
this.imgBox=jQuery（“#”+boxName）；
this.btnName=btnName；
this.setButtonCallback（）；
}
ChangeSlideClass.prototype.setButtonCallback=函数（）{
var obj=这个；
jQuery（“#”+this.btnName）。单击（函数（）{
obj.changelides（）；
});
};
ChangeSlideClass.prototype.changeSlides=函数（）{
变量allChildren、prevSlide、nextSlide、allChildrenNum、lastSlideIndex、LastSlideLem、FirstSlideLem；
allChildren=jQuery（this.imgBox.children（）；
prevSlide=jQuery（allChildren）.eq（this.prevIndex）；
nextSlide=jQuery（allChildren）.eq（this.nextIndex）；
allChildrenNum=allChildren.length；
lastSlideIndex=allChildrenNum-1；
LastSlideLem=jQuery（所有子项）.eq（lastSlideIndex）；
firstSlideLem=jQuery（所有子项）.eq（0）；
如果（this.nextIndex lastSlideIndex）{
该指数=0；
this.nextIndex=1；
this.changeClass（firstSlideLem）；
this.changeClass（LastSlideLem）；
};
};
ChangeSlideClass.prototype.changeClass=函数（元素）{
var elementIsShown=jQuery（element）.hasClass（“显示”）；
如果（元素显示）{
jQuery（element）.removeClass（“show”）.addClass（“hide”）；
}否则{
jQuery（element）.removeClass（“隐藏”）.addClass（“显示”）；
};
};
var changeSlides1=新的ChangeSlidesClass（'img-box1'，'btn1'）；
var changeSlides2=新的ChangeSlidesClass（'img-box2'，'btn2'）

.show{
不透明度：1；
}
.隐藏{
不透明度：0；
}




对于这类事情，您可以随时使用插件。这取决于你想从这项运动中获得什么。你可以从下面我的答案中的代码开始，然后继续。我非常感谢你的更正。如果我想对同一页面上的另一个容器使用相同的函数（changeSlides（）），该怎么办。既然这两个容器都从prevIndex和nextIndex中获取增量，那么它会工作吗？…我该怎么做呢？我的初衷是编写一个可以用于任意多个容器的函数