自定义 jquery 函数中的参数可以更改全局变量的值吗

Question

请问我是 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;}

Answer 1

您正在将全局变量作为函数参数传递并在您的函数中修改它们。这只会更改函数参数值，不会更改全局变量，因为函数参数被视为局部变量。对于常量值 show 和 hide 也是如此，您不需要通过函数参数传递它们，只需在需要的地方使用它们即可。

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

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

var prevIndex, nextIndex, imgBox;

prevIndex = 0;
nextIndex = 1;
imgBox    = jQuery("#img-box");

function changeSlides() {
    var allChildren, prevSlide, nextSlide, allChildrenNum, lastSlideIndex, lastSlideElem, firstSlideElem;

    allChildren    = imgBox.children();
    prevSlide      = jQuery(allChildren).eq(prevIndex);
    nextSlide      = jQuery(allChildren).eq(nextIndex);
    allChildrenNum = allChildren.length;
    lastSlideIndex = allChildrenNum - 1;
    lastSlideElem  = jQuery(allChildren).eq(lastSlideIndex);
    firstSlideElem = jQuery(allChildren).eq(0);

    if (nextIndex <= lastSlideIndex) {
        changeClass(prevSlide);
        changeClass(nextSlide);
        prevIndex++;
        nextIndex++;
    } else if (nextIndex > lastSlideIndex) {
        prevIndex = 0;
        nextIndex = 1;
        changeClass(firstSlideElem);
        changeClass(lastSlideElem);
    };
};

function changeClass(element) {
    var elementIsShown = jQuery(element).hasClass("show");

    if (elementIsShown) {
        jQuery(element).removeClass("show").addClass("hide");
    } else {
        jQuery(element).removeClass("hide").addClass("show");
    };
};


$("button").click(function () {
    changeSlides();
});

.show {
    opacity: 1;
}
.hide {
    opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>

Answer 2

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

function ChangeSlidesClass(boxName, btnName) {
    this.prevIndex = 0;
    this.nextIndex = 1;
    
    this.imgBox = jQuery('#' + boxName);
    this.btnName = btnName;
    
    this.setButtonCallback();
}

ChangeSlidesClass.prototype.setButtonCallback = function() {
    var obj = this;
    
    jQuery("#" + this.btnName).click(function () {
        obj.changeSlides();
    });
};

ChangeSlidesClass.prototype.changeSlides = function() {
    var allChildren, prevSlide, nextSlide, allChildrenNum, lastSlideIndex, lastSlideElem, firstSlideElem;

    allChildren    = jQuery(this.imgBox).children();
    prevSlide      = jQuery(allChildren).eq(this.prevIndex);
    nextSlide      = jQuery(allChildren).eq(this.nextIndex);
    allChildrenNum = allChildren.length;
    lastSlideIndex = allChildrenNum - 1;
    lastSlideElem  = jQuery(allChildren).eq(lastSlideIndex);
    firstSlideElem = jQuery(allChildren).eq(0);

    if (this.nextIndex <= lastSlideIndex) {
        this.changeClass(prevSlide);
        this.changeClass(nextSlide);
        this.prevIndex++;
        this.nextIndex++;
    } else if (this.nextIndex > lastSlideIndex) {
        this.prevIndex = 0;
        this.nextIndex = 1;
        this.changeClass(firstSlideElem);
        this.changeClass(lastSlideElem);
    };
};

ChangeSlidesClass.prototype.changeClass = function(element) {
    var elementIsShown = jQuery(element).hasClass("show");

    if (elementIsShown) {
        jQuery(element).removeClass("show").addClass("hide");
    } else {
        jQuery(element).removeClass("hide").addClass("show");
    };
};


var changeSlides1 = new ChangeSlidesClass('img-box1', 'btn1');
var changeSlides2 = new ChangeSlidesClass('img-box2', 'btn2');

.show {
    opacity: 1;
}
.hide {
    opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
    <div id="img-box1">
        <img src="img1.jpg" class="show">
        <img src="img2.jpg" class="hide">
        <img src="img3.jpg" class="hide">
    </div>
            
    <button id="btn1"></button>
    
    <div id="img-box2">
        <img src="img1.jpg" class="show">
        <img src="img2.jpg" class="hide">
        <img src="img3.jpg" class="hide">
    </div>
    <button id="btn2"></button>
</body>

现在我在页面上定义了两组图像框和按钮。然后我用一些 (public) 方法实现 javascript-class 并为页面上的每个 image-box/button 集生成一个 class 的新实例。绑定 click 事件是在 class.

的构造函数中完成的

您可以改进这一点，方法是将 image-box/button 与 <div class="myImageChanger">...</div> 和 var imageChangers = new ChangesSlidesClass('myImageChanger') 相结合，以自动初始化页面上的每个实例。您只需要修改 class-构造函数 (function ChangeSlidesClass) 即可。

自定义 jquery 函数中的参数可以更改全局变量的值吗

Can an argument in a custom jquery function change the value of a global variable

javascript

variables

jquery

scope

global