Question

我有以下代码循环遍历imgs数组，并允许用户单击图像以逐步浏览数组，以便在每次单击图像时更改图像。它工作正常 - 但我正在努力修改它 - 见下文。

当前工作示例

＆＃13;

var imgs = [ "https://cdnjs.cloudflare.com/ajax/libs/emojione/1.0.0/assets/svg/1F386.svg"
		   , "https://cdnjs.cloudflare.com/ajax/libs/emojione/1.5.0/assets/svg/1F386.svg"
		   , "https://cdnjs.cloudflare.com/ajax/libs/emojione/2.0.0/assets/svg/1F386.svg"
		   , "https://cdnjs.cloudflare.com/ajax/libs/emojione/2.1.0/assets/svg/1f386.svg"
		   , "https://cdn.jsdelivr.net/emojione/assets/3.0/png/128/1f386.png" ];
		   
var imgs_count = imgs.length;

function changeImage(dir) {

    var img = document.getElementById("imgClickAndChange");
    img.src = imgs[imgs.indexOf(img.src) + (dir || 1)] || imgs[dir ? imgs.length - 1 : 0];
	
    var x = imgs.indexOf(img.src) + 1; // index of current image plus one
    var z = x + "/" + imgs_count; // concatenate the strings
    var versionDiv = document.getElementById('versions');
    versionDiv.textContent = z; //replace the text in the versions div

    var imgver = document.getElementById("versions");
    imgver.src = imgs_count;

}

＆＃13;

<div id="slideshow" style="margin:20px 0px -2px 0px; border:1px solid #eee; border-radius:5px; padding:20px; width:235px;">
        <center>
			<img alt="slideshow" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/1.0.0/assets/svg/1F386.svg" id="imgClickAndChange" onclick="changeImage()" width="128" height="128" />
		</center>
    </div>
	<div id="versions">1/5</div>

＆＃13;

我还想在图像名称后面的每个数组元素中包含图像的年份，用管道分隔：

var imgs = [ "https://cdnjs.cloudflare.com/ajax/libs/emojione/1.0.0/assets/svg/1F386.svg|2018"
           , "https://cdnjs.cloudflare.com/ajax/libs/emojione/1.5.0/assets/svg/1F386.svg|2017"
           , "https://cdnjs.cloudflare.com/ajax/libs/emojione/2.0.0/assets/svg/1F386.svg|2016"
           , "https://cdnjs.cloudflare.com/ajax/libs/emojione/2.1.0/assets/svg/1f386.svg|2015"
           , "https://cdn.jsdelivr.net/emojione/assets/3.0/png/128/1f386.png|2014" ];

然后我想拆分那一年的数据，并在以1/5开头的文本后显示在括号中，并在每次点击图像时更改。

我有点接近，但不够接近让它起作用：

＆＃13;

var imgs = [ "https://cdnjs.cloudflare.com/ajax/libs/emojione/1.0.0/assets/svg/1F386.svg|2018"
		   , "https://cdnjs.cloudflare.com/ajax/libs/emojione/1.5.0/assets/svg/1F386.svg|2017"
		   , "https://cdnjs.cloudflare.com/ajax/libs/emojione/2.0.0/assets/svg/1F386.svg|2016"
		   , "https://cdnjs.cloudflare.com/ajax/libs/emojione/2.1.0/assets/svg/1f386.svg|2015"
		   , "https://cdn.jsdelivr.net/emojione/assets/3.0/png/128/1f386.png|2014" ];

var imgs_count = imgs.length;

function changeImage(dir) {

    var img = document.getElementById("imgClickAndChange");
    var array_data = imgs[imgs.indexOf(img.src) + (dir || 1)] || imgs[dir ? imgs.length - 1 : 0];
	img.src = array_data;
	
	var this_len = array_data.length;
	var pipe_pos = array_data.indexOf("|");
	var var_image = array_data.substr(0, pipe_pos);
	var var_year = array_data.substr(pipe_pos+1, this_len);

	console.log("array_data: " + array_data);
	console.log("this_len: " + this_len);
	console.log("pipe_pos: " + pipe_pos);
	console.log("var_image: " + var_image);
	console.log("var_year: " + var_year);
	
    var x = imgs.indexOf(img.src) + 1; // index of current image plus one
    var z = x + " / " + imgs_count; // concatenate the strings
    var versionDiv = document.getElementById('versions');
    versionDiv.textContent = z + " (" + var_year + ")"; //replace the text in the versions div

    var imgver = document.getElementById("versions");
    imgver.src = imgs_count;

}

＆＃13;

    <div id="slideshow" style="margin:20px 0px -2px 0px; border:1px solid #eee; border-radius:5px; padding:20px; width:235px;">
        <center>
			<img alt="slideshow" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/1.0.0/assets/svg/1F386.svg" id="imgClickAndChange" onclick="changeImage()" width="128" height="128" />
		</center>
    </div>
	<div id="versions">1/5 (2018)</div>

＆＃13;

点击图片，显然图片无法显示，因为图片网址末尾有一个竖线和一年。

但是每次点击图片时年份都会发生变化，因此我设法将图片网址末尾的年份分开。

我可以从console.log中看到，我也可以从管道之前提取图像URL，但如果我更改代码，则来自：

img.src = array_data;

要：

img.src = var_image;

在设置了var_image和var_year的代码行之后，它会完全断开，一旦我点击图片，年份就不会改变，我无法从那里进步：

＆＃13;

var imgs = [ "https://cdnjs.cloudflare.com/ajax/libs/emojione/1.0.0/assets/svg/1F386.svg|2018"
		   , "https://cdnjs.cloudflare.com/ajax/libs/emojione/1.5.0/assets/svg/1F386.svg|2017"
		   , "https://cdnjs.cloudflare.com/ajax/libs/emojione/2.0.0/assets/svg/1F386.svg|2016"
		   , "https://cdnjs.cloudflare.com/ajax/libs/emojione/2.1.0/assets/svg/1f386.svg|2015"
		   , "https://cdn.jsdelivr.net/emojione/assets/3.0/png/128/1f386.png|2014" ];

var imgs_count = imgs.length;

function changeImage(dir) {

    var img = document.getElementById("imgClickAndChange");
    var array_data = imgs[imgs.indexOf(img.src) + (dir || 1)] || imgs[dir ? imgs.length - 1 : 0];
	
	var this_len = array_data.length;
	var pipe_pos = array_data.indexOf("|");
	var var_image = array_data.substr(0, pipe_pos);
	var var_year = array_data.substr(pipe_pos+1, this_len);
	
	img.src = var_image;

	console.log("array_data: " + array_data);
	console.log("this_len: " + this_len);
	console.log("pipe_pos: " + pipe_pos);
	console.log("var_image: " + var_image);
	console.log("var_year: " + var_year);
	
    var x = imgs.indexOf(img.src) + 1; // index of current image plus one
    var z = x + " / " + imgs_count; // concatenate the strings
    var versionDiv = document.getElementById('versions');
    versionDiv.textContent = z + " (" + var_year + ")"; //replace the text in the versions div

    var imgver = document.getElementById("versions");
    imgver.src = imgs_count;

}

＆＃13;

    <div id="slideshow" style="margin:20px 0px -2px 0px; border:1px solid #eee; border-radius:5px; padding:20px; width:235px;">
        <center>
			<img alt="slideshow" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/1.0.0/assets/svg/1F386.svg" id="imgClickAndChange" onclick="changeImage()" width="128" height="128" />
		</center>
    </div>
	<div id="versions">1/5 (2018)</div>

＆＃13;

我可能正在做一些愚蠢的事情，但我无法解决问题。

继续irkeninvader的非常有用的答案，我想知道我是否可以更改此代码，我必须使用键盘上的逗号和句号键逐步浏览下一张/上一张图像：

document.onkeydown = function(e) {
    e = e || window.event;
    if (e.keyCode == '188') {
        changeImage(-1) //left <- show Prev image
    } else if (e.keyCode == '190') {
        // right -> show next image
        changeImage()
    }
}

代码可以工作，但是现在每个密钥只在图像中前进，而旧版本使用我的丑陋代码，在按下逗号时会退回图像，并使用句点/句号向前转发。

由于

Answer 1

您可以将图片的src和year存储在不同的属性中，以避免混淆字符串拆分逻辑。

我重构了你的代码（希望你不要介意）只是为了展示另一种方法来解决这个问题。

跟踪你的图像数组和当前索引开始变得混乱所以我引入了ImageManager来处理所有混乱的部分。

ImageManager包含Imgs数组，并且具有抓取下一个图像的功能以及一些更容易更新ui的功能。

ImageModel是一个简单的函数，它返回一个具有ImageSource和Year属性的对象，以避免必须从单个字符串中拆分信息。

希望这是有道理的，它基本上只是一种整理信息存储位置的方法，并使用多个小函数来确保没有任何一个代码区域感到凌乱。

这可以进一步采取，也许ImageManager可以存储当前选定的ImageModel并返回整个versionDiv信息字符串，以便changeImage函数不必将字符串添加到一起。

你感觉到的任何地方都变得复杂，只需将其分解为具有良好名称的较小功能。玩得开心！

＆＃13;

var manager = new ImageManager();

document.onkeydown = function(e) {
    e = e || window.event;
    if (e.keyCode == '188') {
        changeImage('Previous'); //left <- show Prev image
    } else if (e.keyCode == '190') {        
        changeImage('Next'); // right -> show next image
    }
}

function changeImage(direction) {
    var img = document.getElementById("imgClickAndChange");
    var versionDiv = document.getElementById('versions');
    
    var model;
    if(direction === 'Next'){
      model = manager.NextImage();    
    }
    
    if(direction === 'Previous'){
      model = manager.PreviousImage();    
    }      
    
    img.src = model.ImageSrc;        
    versionDiv.textContent = manager.ImageProgressString() + ' [' + model.Year + ']';  //replace the text in the versions div
}

changeImage('Next');

function ImageManager() {
  var self = this;
  self.Imgs = []; 
  self.Index = -1;
  
  function Init(){
    self.Imgs.push(ImageModel('https://cdnjs.cloudflare.com/ajax/libs/emojione/1.0.0/assets/svg/1F386.svg', '2018'));
    self.Imgs.push(ImageModel('https://cdnjs.cloudflare.com/ajax/libs/emojione/1.5.0/assets/svg/1F386.svg', '2017'));
    self.Imgs.push(ImageModel('https://cdnjs.cloudflare.com/ajax/libs/emojione/2.0.0/assets/svg/1F386.svg', '2016'));
    self.Imgs.push(ImageModel('https://cdnjs.cloudflare.com/ajax/libs/emojione/2.1.0/assets/svg/1f386.svg', '2015'));
    self.Imgs.push(ImageModel('https://cdn.jsdelivr.net/emojione/assets/3.0/png/128/1f386.png', '2014'));         
  }
  
  self.NextImage = function() {    
    self.AddToIndex(1);
    return self.Imgs[self.Index];            
  }
  
  self.PreviousImage = function() {    
    self.AddToIndex(-1);
    return self.Imgs[self.Index];            
  }  
  
  self.ImageProgressString = function() {
    return (self.Index + 1) + '/' + self.Imgs.length;
  }
  
  self.AddToIndex = function(change) {    
    var len = self.Imgs.length;
    self.Index = (self.Index + change + len) % len;
  }
  
  Init();   
}

function ImageModel(img, year) {
  return { ImageSrc: img, Year: year };
}

＆＃13;

<div id="slideshow" style="margin:20px 0px -2px 0px; border:1px solid #eee; border-radius:5px; padding:20px; width:235px;">
  <center>
    <img alt="slideshow" id="imgClickAndChange" onclick="changeImage('Next')" width="128" height="128" />
  </center>
</div>
<div id="versions"></div>

＆＃13;

修改分割图像和年份的功能

1 个答案: