Question

首先，我无法通过morscreens [i]从我想要的阵列中生成图像。当我按原样使用时，它实际上是一个[＆lt;]按钮，字面意思是“morscreens [i]”然后是[＆gt;]按钮。当我用引号包围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

Answer 2

这是一个没有变量的字符串：

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

你需要突破你的价值：

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

使用数组切换不同的图像

2 个答案: