Question

我有一个简单的表单（文本字段和提交按钮）。我试图让用户提交一个数字，结果数字将显示一个div（来自一组div）。

我尝试使用this example作为基础（当用户点击链接时，它会显示div，但会隐藏其他内容）。

我的测试如下：

var divState = {};

function showhide(oFrm) {
    var dividnum = oFrm.Inputed.value;
    var prepar = "para";
    var divid = prepar + theInput; /* should result in something like "para52" */


    divState[divid] = (divState[divid]) ? false : true; 
    //close others
    for (var div in divState){
        if (divState[div] && div != divid){
            document.getElementById(div).style.display = 'none';
            divState[div] = false;
        }
    }

    divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
}

http://jsfiddle.net/LfzYc/431/

注意：我根本不熟悉JavaScript，这就是我遇到困难的原因。

另外，我想添加一个函数...如果输入的数字不在1-4之间，则显示不同的div，可能带有id paraEnd。

Answer 1

请根据您的jsFiddle查看Array#reduce。我希望我做了你想做的事。我更改了showhide功能和您的HTML（已修复div的ID，并添加了一个div#paraEnd）。我建议您重构代码。

Answer 2

您应该使用jQuery来轻松操作DOM。使用jQuery我为你做了一个例子，只需更改你的JS并粘贴我的：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript">

    (function ($) {

        // get the paragraphs
        var paragraphs = $('.paragraph');

        // form submit
        $('#paragraphform').submit(function (e) {
            // prevent the event to flow
            e.preventDefault();

            // get the input value
            var value = $('#Inputed').val() - 1;

            // reset all divs removing active css class
            paragraphs.removeClass('active');
            $('.error').removeClass('active');

            // verify if the value doens't exist
            if(value < 0 || value > paragraphs.length - 1) {
                $('.error').addClass('active');
                return;
            }

            // show the active div
            paragraphs.eq(value).addClass('active');
        }); 

    })(jQuery);

</script>

这就是你需要的吗？

如果你不熟悉jQuery，那就是jquery Learn Center： https://learn.jquery.com/

对于初学者来说这是一个很好的教程： http://www.tutorialspoint.com/jquery/

Javascript - 提交文本字段，显示Div，隐藏所有其他

2 个答案: