通过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选择要显示的那个