javascript - 使用数组切换不同的图像

Question

首先，我无法让 morscreens[i] 从我想要的数组中生成图像。当我按原样使用它时，它实际上会创建一个 [<] 按钮，字面意思是“morscreens[i]”，然后是 [>] 按钮。当我用引号包围 morscreens[i] 时(退出然后重新输入带引号的文本)，我收到错误 morshots() 未定义。

其次，如果我希望按钮循环显示，我应该使用子例程 morPrev() 和 morNext() 来执行此操作吗？我担心的是我想要返回的值超出范围并放置在适当的位置。我担心仅仅使用 i++ 和 i-- 不足以使其正常工作，即使使用 2 个 if 语句也是如此。

var mordorscreens = new Array();
mordorscreens[0] = '<img src=\"http://i.imgur.com/83HCt.png\" alt=\"scrns1\">';
mordorscreens[1] = '<img src=\"http://i.imgur.com/5mWIy.png\" alt=\"scrns1\">';
mordorscreens[2] = '<img src=\"http://i.imgur.com/pPafl.png\" alt=\"scrns1\">';

function morshots()
{
var i = 0;
    var mordor = document.getElementById("ss1");
        mordor.innerHTML = '<button onClick="morPrev();"> < </button>    mordorscreens[i]    <button onClick="morNext();"> > </button> ';

if (i<0) {i=2};
if (i>2) {i=0};
}

Answer 1

这一行

'<button onClick="morPrev();"> < </button>    
                mordorscreens[i]    <button onClick="morNext();"> > </button> ';

应该看起来像

'<button onClick="morPrev();"> &lt; </button>' 
             + mordorscreens[i] + '<button onClick="morNext();"> &gt; </button>';

我认为公开变量 i 来迭代图像是一个坏主意。最好在 Javascript 中而不是 HTML 中分配事件处理程序..

试试这个代码

HTML

<div id="ss1">
   <button id="previous"> &lt; </button>
   <span id="imageSpan"></span>
   <button id="next"> &gt; </button>
</div>

Javascript

var mordorscreens = [];
mordorscreens[0] = '<img src="http://i.imgur.com/83HCt.png" alt="scrns1">';
mordorscreens[1] = '<img src="http://i.imgur.com/5mWIy.png" alt="scrns1">';
mordorscreens[2] = '<img src="http://i.imgur.com/pPafl.png" alt="scrns1">';

function morshots() {
    var i = 0;
    var elem = document.getElementById('imageSpan');
    elem.innerHTML = mordorscreens[i];
    // Data Attribute that holds the initial 
    // image number
    elem.setAttribute('data-number', i);
}
// Call The function
morshots();

// Assign Event handlers
var buttons = document.getElementsByTagName('button');

for (var j = 0; j < buttons.length; j++) {
    // Add Click events to the button
    buttons[j].addEventListener('click', clickHandler);
}

function clickHandler() {
    var elem = document.getElementById('imageSpan');
    // Store the current Image Number in a HTML5 data-attribute
    var currImage = parseInt(elem.getAttribute('data-number'), 10);
    if (this.id === 'previous') {
        currImage--;
        currImage = currImage < 0 ? 2 : currImage;
    }
    else if (this.id === 'next') {
        currImage++;
        currImage = currImage > 2 ? 0 : currImage;
    }
    // Set the current Image Number 
    elem.setAttribute('data-number', currImage);
    elem.innerHTML = mordorscreens[currImage];
}

<强> Check JSBin Demo