Question

我已经开始创建一个测验。今天所有问题和答案都在同一个数组中。通过id b1 - b4和函数getElementById，HTMl，JavaScript和CSS取得了成功。

但现在我想＆＃34;转换＆＃34;这个脚本是移动版本。所以我开始使用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

通过jQuery Mobile中的ID填充数组中的按钮值

1 个答案: