通過jQuery Mobile中的ID從數組中填充按鈕值

Question

我已經開始創建一個測驗。所有問題和答案今天都在同一陣列中。在ID的b1 - b4和函數getElementById上，HTMl，JavaScript和CSS取得了成功。

但是現在我想將這個腳本「轉換」爲移動版本。所以我開始使用jQuery Mobile。我將getElementById更改爲$("#variable").val(array);。並用Firebug進行檢查。 Firebug告訴我，按鈕的值填充了Array-values，但我在正常視圖中看不到它。

有人能告訴我解決我的錯誤的方法嗎？

HTML-按鈕

   <input id='b1' type="button" value="" ONCLICK="analyseB1()"/> 

       <input id='b2' type="button" value="" ONCLICK="analyseB2()"/> 


       <input id='b3' type="button" value="" ONCLICK="analyseB3()"/> 

       <input id='b4' type="button" value="" ONCLICK="analyseB4()"/> 

       <input id='next' type="button" value="Next Question" ONCLICK="next()"/> 

JS-功能

function next() 
{ 
    document.getElementById('header').innerHTML = array[questioncounter][0]; 
    $("#b1").val(array[questioncounter][1]); 
    $("#b2").val(array[questioncounter][2]); 
    $("#b3").val(array[questioncounter][3]); 
    $("#b4").val(array[questioncounter][4]); 

    document.getElementById('next').style.display='none'; 

    document.getElementById('b1').style.backgroundColor = ''; 
    document.getElementById('b2').style.backgroundColor = ''; 
    document.getElementById('b3').style.backgroundColor = ''; 
    document.getElementById('b4').style.backgroundColor = ''; 

}

Answer 1

我在這裏的第一個建議是學習一些jQuery的節目，你會看到它的根本。現在，關於你的問題：

• 使用<a href="#" id="b1" data-role="button"></a>創建按鈕
• 不使用onclick處理
• 使用智能jQuery選擇，以避免重複的功能

HTML：

<div data-role="page" id="page"> 
    <a href="#" id="b1" data-role="button"></a> 
    <a href="#" id="b2" data-role="button"></a> 
    <a href="#" id="b3" data-role="button"></a> 
    <a href="#" id="b4" data-role="button"></a> 
    <a href="#" id="next" data-role="button">Next question</a> 
</div> 

的JavaScript：

$(document).on("click", "[id^=b]", function(event, ui) 
{ 
    alert(this.id); 
}); 

$(document).on("click", "#next", function(event, ui) 
{ 
    $("#b1").prop("innerHTML", "b1 button"); 
    $("#b2").prop("innerHTML", "b2 button"); 
    $("#b3").prop("innerHTML", "b3 button"); 
    $("#b4").prop("innerHTML", "b4 button"); 

    $("#next").css("display", "none"); 
    $("[id^=b]").css("backgroundColor", ""); 
}); 

JSFiddle