通过js函数更改全局变量

Question

我想通过单击按钮更改一组滚动图像。这里的问题是如何通过这些函数更改全局变量 请看附件代码，

我想在onload时启动stack()函数，改变onclick设置的滚动图片；

我应该添加一个 onload 事件并单独调用 stack() 函数，只使用本地 var 吗？ 谢谢， 乔

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() 函数中，正确的图像字符串只是从单击的按钮中获取，而不是设置一些全局变量的函数。

// 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

一种方法是改变图像的可变性

在imagestack中添加可变性=“hidden”，创建这三个框后，onclickfunction onlick选择显示哪一个