自定义 jquery 函数中的参数是否可以更改全局变量的值
Can an argument in a custom jquery function change the value of a global variable
拜托,我是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;}
如果你想在页面上使用多个容器,你可以尝试使用类。尝试以下代码:
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>
现在我在页面上定义了两组图像框和按钮。然后,我使用一些(公共(方法实现一个javascript类,并为页面上的每个图像框/按钮集生成该类的新实例。绑定 click
-事件是在类的构造函数中完成的。
您可以通过将图像框/按钮组合与<div class="myImageChanger">...</div>
和类似var imageChangers = new ChangesSlidesClass('myImageChanger')
的东西来自动初始化页面上的每个实例来改善这一点。你只需要修改类构造函数(function ChangeSlidesClass
(来做到这一点。
您将全局变量作为函数参数传递并在函数中修改它们。这只会更改函数参数值,而不会更改全局变量,因为函数参数被视为局部变量。对于常量值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>
- 在 Javascript 中创建全局变量时是否需要指定对象类型
- JSHint是否可以输出有关全局变量的警告
- 检查全局变量是否存在的正确方法是什么
- 确定是否在不使用任何全局变量的情况下加载了窗口
- js事件循环是否意味着可以为临时暂存空间使用全局变量
- 是否可以肯定刷新 $_SESSION[] 全局变量
- 如何在不设置全局变量的情况下确定是否已调用函数
- 对函数内部的全局变量所做的更改是否全局反映?Javascript
- 对角度模块使用单个全局变量是否是一种反模式
- 在 NodeJS 中使用和更新全局变量是否安全?
- 函数是否像局部变量一样适用于全局变量
- Javascript - 全局变量和全局范围内的变量是否不同(在 jsfiddle 中)
- 全局变量存储在 Node.JS 中的什么位置?节点中是否有类似窗口的对象
- 我是否正在创建一个全局变量
- 在Couchbase JavaScript视图中是否有可能的全局变量
- 是否可以将 Ext.Component 声明为全局变量
- 是否有任何选项可以在煎茶触摸中声明全局变量
- 自定义 jquery 函数中的参数是否可以更改全局变量的值
- 对于Javascript游戏引擎,重用全局变量是否比使用局部变量更有效?
- 在 .js 文件中声明全局变量是否不好