0

まず、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};
}
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 を公開して画像を反復処理するのは悪い考えだと思います。HTML ではなく Javascript でイベント ハンドラを割り当てることをお勧めします。

このコードを試してください

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 に答える