Question

我知道一点PHP以及HTML / CSS，我做了一个简单的测验程序，允许用户创建和进行存储在MySQL数据库中的测验。现在我要做的是提高程序的可用性和效率。

在createQuestions表单上，有八个文本框，用户可以在这两个框之间填写答案。虽然我认为这对所有八个看起来都很混乱，但我想要的是有两个文本框，当第二个文本中有文本时，第三个出现，依此类推......最多八个

我花了几个小时学习了一些基本的JS，并设法得到它，因此有一个按钮改变了每行输入框，标签和单选按钮的可见性。虽然我写得非常低效但很多代码行并不多：p - 给每个对象一个单独的ID，但它仍然没有那么好用。

下面是我的HTML如何布局的示例，我有八个，虽然我可以用一个替换它，并且PHP for循环的限制为8。

<div id="c">
<p class="subFont" id="cT" style="display:none;">Answer 3</p>
<input type="text" name="optionC"  class="textbox" style="display:none;" id="cI">
<input type="radio" name="correctAns" value="c" id="cR" style="display:none;">
<input type ="button" name="add" value="d" style="background-color:green;" onclick="addBox('d', 'inline')" id="cB" style="display:none;">
</div>

有关如何编写上述脚本的任何建议？请你评论或简要说明你的工作，所以我可以从中学习：）

感谢您提前加载，我非常感谢stackoverflow上的所有人;）

ps，有关学习js资源的任何建议吗？

Answer 1

Pure Javascript

隐藏/显示对象id =“cR”

// hide
document.getElementById('cR').style.display = 'none';

// show
document.getElementById('cR').style.display = 'block';

将textarea附加到

document.getElementById('c').innerHTML += '<textarea name=".." id=".."></textarea>';

事件：

<input type="text" id="xxx" onchange="your action here" />

的jQuery

隐藏/显示对象id =“cR”

// hide
$('#cR').hide();
$('#cR').fadeIn(); // with fade in effect

// show
$('#cR').show();
$('#cR').fadeOut(); // width fade out effect

将textarea附加到

$('#c').append('<textarea name=".." id=".."></textarea>');

事件：

$('#xxx').change(function() {
    your action here
});

Answer 2

在页面中动态添加元素的另一种方法..

    <html>
       <head>
        <script>

            function addElement(obj) {
                text_limit = 5; // limit text then add text after that.    
                var text_lenght = obj.value.length;
                if(text_lenght >= text_limit){

                    var mainElement = document.getElementById('myDiv');
                    var counter= mainElement.getElementsByTagName('textarea').length;
                    var newTextArea = document.createElement('textarea');
                    var textareaname = 'txt_area'+counter;
                    newTextArea.setAttribute('id',textareaname );
                    newTextArea.onkeydown= function() {
                        addElement(this);
                    } 
                    mainElement.appendChild(newTextArea);

                }
            }

        </script>
        </head>
        <body>
            <div id="myDiv">
                <textarea id="txt_area2" onkeyup="addElement(this);"></textarea></div>
        </body>
    </html>

如何使用Javascript更改和添加新的HTML对象？

2 个答案:

Pure Javascript

的jQuery