自定義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;}
2 個解決方案
解決方案1
0 2015-11-22 13:29:22
您將全局變量作為函數參數傳遞，並在函數中對其進行修改。 這只會更改函數參數值，而不會更改全局變量，因為函數參數被視為局部變量。 對於常量值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>
解決方案2
0 已采納 2015-11-22 15:02:29
如果要在頁面上使用多個容器，則可以嘗試使用類。 嘗試以下代碼：
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 -event是在類的構造函數中完成的。
您可以通過使用<div class="myImageChanger">...</div>和類似var imageChangers = new ChangesSlidesClass('myImageChanger') <div class="myImageChanger">...</div>的圖像框/按鈕組合來初始化您的每個實例來var imageChangers = new ChangesSlidesClass('myImageChanger')頁面自動。 您只需要修改類構造函數（ function ChangeSlidesClass ）即可。
不能使用全局變量作為jQuery函數的參數
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.