0

首先，我无法让 morscreens[i] 从我想要的数组中生成图像。当我拥有它时，它实际上是一个 [<] 按钮，字面意思是“morscreens [i]”，然后是 [>] 按钮。当我用引号包围 morscreens[i] （退出然后重新输入引用的文本）时，我得到错误 morshots() is not defined。

其次，如果我想让按钮循环显示，我应该使用子程序 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};
}
4

2 回答 2

2

这条线

'<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];
}

检查 JSBin 演示

于 2012-11-21T20:44:16.263 回答
0

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

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

你需要打破你的价值：

mordor.innerHTML = '<button onClick="morPrev();"> < </button>'  +  mordorscreens[i]  +  '<button onClick="morNext();"> > </button> ';
于 2012-11-21T20:44:45.953 回答