通過js函數更改全局變量

Question

我想通過單擊按鈕來更改一組滾動圖像。 這里的問題是如何通過這些函數更改全局變量，請參見隨附的代碼，

我想在onload時啟動stack（）函數，並更改onclick設置的滾動圖像；

是否應該僅使用本地var添加onload事件並單獨調用stack（）函數？ 謝謝，喬

var images = imagest;

function softtissue(){

    var images = imagest;
}

function bone(){

    var images = imagebone;

}
function lung(){
    var images = imagelung;
}
var stack = new ImageStack({
  images: images,
  height: '512px',
  width: '512px'
});
document.querySelector('.example').appendChild(stack);

 // how to use the funciton on line 94 // for questions email felix@demont.is var images10 = [ "https://igu3ss.files.wordpress.com/2012/09/chess_king_4.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Chess_piece_-_Black_queen.JPG/130px-Chess_piece_-_Black_queen.JPG", "https://asmoodle.asmadrid.org/blog/s16240/wp-content/uploads/sites/56/2014/12/protourney_knight_black_400.jpg", "https://thumbs.dreamstime.com/x/chess-knight-white-background-29811348.jpg", "http://cdn.craftsy.com/upload/3703789/pattern/115774/full_7439_115774_ChessKnightMachineEmbroideryDesign_1.jpg" ]; var imagesbone = [ "https://igu3ss.files.wordpress.com/2012/09/chess_king_4.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Chess_piece_-_Black_queen.JPG/130px-Chess_piece_-_Black_queen.JPG", "https://asmoodle.asmadrid.org/blog/s16240/wp-content/uploads/sites/56/2014/12/protourney_knight_black_400.jpg", "https://thumbs.dreamstime.com/x/chess-knight-white-background-29811348.jpg", "http://cdn.craftsy.com/upload/3703789/pattern/115774/full_7439_115774_ChessKnightMachineEmbroideryDesign_1.jpg", "https://igu3ss.files.wordpress.com/2012/09/chess_king_4.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Chess_piece_-_Black_queen.JPG/130px-Chess_piece_-_Black_queen.JPG", "https://asmoodle.asmadrid.org/blog/s16240/wp-content/uploads/sites/56/2014/12/protourney_knight_black_400.jpg", "https://thumbs.dreamstime.com/x/chess-knight-white-background-29811348.jpg", "http://cdn.craftsy.com/upload/3703789/pattern/115774/full_7439_115774_ChessKnightMachineEmbroideryDesign_1.jpg" ]; var imageslung = [ "https://igu3ss.files.wordpress.com/2012/09/chess_king_4.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Chess_piece_-_Black_queen.JPG/130px-Chess_piece_-_Black_queen.JPG", "https://asmoodle.asmadrid.org/blog/s16240/wp-content/uploads/sites/56/2014/12/protourney_knight_black_400.jpg", "https://thumbs.dreamstime.com/x/chess-knight-white-background-29811348.jpg", "http://cdn.craftsy.com/upload/3703789/pattern/115774/full_7439_115774_ChessKnightMachineEmbroideryDesign_1.jpg", "https://igu3ss.files.wordpress.com/2012/09/chess_king_4.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Chess_piece_-_Black_queen.JPG/130px-Chess_piece_-_Black_queen.JPG", "https://asmoodle.asmadrid.org/blog/s16240/wp-content/uploads/sites/56/2014/12/protourney_knight_black_400.jpg", "https://thumbs.dreamstime.com/x/chess-knight-white-background-29811348.jpg", "http://cdn.craftsy.com/upload/3703789/pattern/115774/full_7439_115774_ChessKnightMachineEmbroideryDesign_1.jpg", "https://igu3ss.files.wordpress.com/2012/09/chess_king_4.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Chess_piece_-_Black_queen.JPG/130px-Chess_piece_-_Black_queen.JPG", "https://asmoodle.asmadrid.org/blog/s16240/wp-content/uploads/sites/56/2014/12/protourney_knight_black_400.jpg", "https://thumbs.dreamstime.com/x/chess-knight-white-background-29811348.jpg", "http://cdn.craftsy.com/upload/3703789/pattern/115774/full_7439_115774_ChessKnightMachineEmbroideryDesign_1.jpg" ]; function ImageStack(options) { var self = this; self.img_array = options.images; self.stack = document.createElement('div'); self.stack.style.overflow = 'auto'; self.stack.style.maxWidth = '100%'; self.stack.style.height = options.height; self.stack.style.width = options.width; self.stack.style.backgroundSize = 'cover' self.stack.style.position = 'relative'; var typeRegex = /(\\D+)/ var sizeType = options.height.match(typeRegex)[0] var numberRegex = /(\\d+)/ self.height_number = Number(options.height.match(numberRegex)[0]) self.wrapper = document.createElement('div'); for (var i = 0; i < self.img_array.length; i++) { var image = document.createElement('img'); image.src = self.img_array[i]; image.style.display = 'none'; image.style.position = 'absolute'; image.style.width = options.width; image.style.height = options.height; image.style.top = 0; image.style.left = 0; image.dataset.iid = i; self.wrapper.appendChild(image); } self.image_elements = self.wrapper.querySelectorAll('img'); self.scrollobject = document.createElement('div'); self.scrollobject.style.width = '100%'; self.scrollobject.style.position = 'absolute'; self.scrollobject.style.zIndex = '2'; self.img_count = (self.img_array.length > 15) ? self.img_array.length : 15; self.scrollobject_height = Math.floor(0.1 * self.img_count * self.height_number); self.scrollobject.style.height = self.scrollobject_height + sizeType; self.scrollUpdate = function(e) { self.height_number = self.stack.getBoundingClientRect().height self.scrollobject_height = Math.floor(0.1 * self.img_count * self.height_number); var sT = self.stack.scrollTop var hn05 = self.img_array.length - 1 var hh = (self.scrollobject_height - self.height_number) / hn05 scrollval = Math.floor(sT / (hh)) self.currentimg = self.image_elements[scrollval].src self.stack.style.backgroundImage = 'url(' + self.currentimg + ')'; } self.stack.addEventListener('scroll', self.scrollUpdate); self.currentimg = self.image_elements[0].src self.stack.style.backgroundImage = 'url(' + self.currentimg + ')'; window.addEventListener('resize', function() { var stackRect = self.stack.getBoundingClientRect() console.log(stackRect) self.height_number = stackRect.height self.scrollobject_height = Math.floor(0.1 * self.img_array.length * self.height_number); self.stack.style.width = stackRect.width + 'px' self.stack.style.eight = stackRect.width + 'px' }) self.stack.appendChild(self.wrapper); self.stack.appendChild(self.scrollobject); return self.stack; } /*problems here*/ /*global var*/ var images = images10; /*local var*/ function softtissue() { var images = images10; } function bone() { var images = imagesbone; } function lung() { var images = imageslung; } /*how to switch the local var in global function*/ var stack = new ImageStack({ images: images, height: '512px', width: '512px' }); document.querySelector('.example').appendChild(stack); 

 <div> <button id="softtissue" type="button" onclick="softtissue();return false" class="button"> Soft Tissue</button> <button id="bone" type="button" onclick="bone(); return false;" class="button"> Bone</button> <button id="lung" type="button" onclick="lung(); return false" class="button"> Lung</button> </div> <div class="example"> </div> 

Answer 1

var images = imagebone; 從不更改全局變量，但會初始化局部變量。 它在函數內部創建局部變量images 。 您不應該在函數內部使用var

function softtissue(){
    images = imagest;
}
function bone(){
    images = imagebone;
}
function lung(){
    images = imagelung;
}

Answer 2

更好的方法是將images用作通用函數的參數，而不是特定於圖像的單獨函數。 這樣，您可以添加無限數量的圖像，而無需為每個圖像編寫額外的功能。

因此，在change_image()函數內部， change_image()單擊的按鈕中獲取了正確的圖像字符串，而不是使用函數來設置一些全局變量。

 // ImageStack mockup function ImageStack( config ) { this.images = config.images; this.height = config.height; this.width = config.width; } ImageStack.prototype.node = function() { return document.createElement( 'div' ).appendChild( document.createTextNode( this.images )); }; // click event for all the buttons function change_image( event ) { var image_type = event.target.getAttribute( 'data-type' ); var stack = new ImageStack({ images: `image${ image_type }`, height: '512px', width: '512px' }); render( stack.node() ); } // render function. // Could be inside the click event, but I would prefer seperate functions. function render( image ) { document.querySelector('.example').appendChild( image ); } Array.from( document.querySelectorAll( 'button' )).forEach(function( button ) { button.addEventListener( 'click', change_image ); }); 

 <nav> <button data-type="st">ST</button> <button data-type="bone">BONE</button> <button data-type="lung">LUNG</button> </nav> <section class="example"></section> 

編輯：

由於問題文本已更新且不再包含該行， Or is there a better approach? ，這個答案似乎很奇怪。

Answer 3

一種方法是更改​​圖像的可變性

在圖像堆棧中添加可變性=“ hidden”，並在創建這三個框后，onclickfunction onlick選擇要顯示的那個