1

我在使用一些 javascript 以及它如何控制 html“文本框”时遇到了一些问题。

首先，这就是我所拥有的；javascript:

function UpdateOrder()
{
    // enable/disable appropriate buttons
    document.getElementById("reset").disabled=false;
    document.getElementById("add").disabled=false;
    document.getElementById("submit").disabled=false;
    document.getElementById("edit").disabled=false;
    document.getElementById("update").disabled=true;

    // Show display box, 'DispCurOrder'
    document.getElementById('all_labels').disabled=true;
}

function EditOrder()
{
    // enable/disable appropriate buttons
    document.getElementById("reset").disabled=true;
    document.getElementById("add").disabled=true;
    document.getElementById("submit").disabled=true;
    document.getElementById("edit").disabled=true;
    document.getElementById("update").disabled=false;

    document.getElementById('all_labels').disabled=false;
}

这个想法很简单......我有一些按钮和输入来生成一个'行'的文本，这些文本会被转储到禁用的文本框中。如果操作员注意到他们做了一个 type-o 或想要更改某些内容，他们点击“编辑订单”，它会禁用所有常规按钮，并启用文本框和“更新”按钮。“更新顺序”按钮可以逆转这一点。

现在，当我只使用在文本框中添加行时，一切正常。您可以看到每一行都附加到文本框（还有另一个 java 函数可以执行一堆错误检查等，但关键是它获取文本框的内容，将其解析为“\n”数组，然后附加新的文本行。然后它获取数组并将其作为一个新字符串放在一起，然后将其放回文本框中。这是没有所有错误检查内容的部分；

function AppendOrder()
{
    // let's set up an error flag.
    var AppendError="";
    var str1=document.forms["MyForm"].DataEntry1.value;
    var str2=document.forms["MyForm"].DataEntry2.value;

    if( /* checking variable str1 for errors */)
    {
        AppendError="Error in str 1 here";
    }

    if( /* checking variable str1 for errors */)
    {
        AppendError=AppendError+"Error in str 2 here";
    }

    // Display the error message, if there are no errors, it will clear what was there.
    $('#AppendStatus').html(AppendError);

    if(AppendError=="")
    {
        // it's all good, update the display
        // create line of text
        curEntry=str1 + " -- " + str2;

        // let's get the current order into a list
        str=document.getElementById('all_data').innerHTML;

        if(str1=="Empty")
        {
            // make curOrder = to 1 element array of curEntry
            var curOrder=[curEntry];
        }
        else
        {
            // parse str1 into an array and parse it to curOrder.
                    // Then push curEntry on the end.
            var curOrder=str1.split("\n");
            curOrder.push(curEntry);
        }

        // now we should have an array called 'curOrder[]'.  Let's show it 
            // on the web page.
        $('#all_labels').html(curOrder);
    }
}

现在，我遇到的问题是，在我使用“添加”按钮向显示器添加一两行（或更多）然后进入“编辑”模式（启用文本框）之后，我进行所有更改，“添加”按钮不起作用。

奇怪的是，当我按下“重置”按钮（这只是一个重置按钮）时，它会显示我在编辑后所做的所有添加，而编辑过的东西就消失了。

现在......问题......我对文本框有什么不理解的地方吗？我需要做一些技巧来让它工作吗？我对这一切都错了吗？我应该为此使用“文本框”以外的其他工具吗？

任何帮助是极大的赞赏！！

格雷格

4

2 回答 2

0

在您的 jsFiddle中找到错字。

我做的第一件事是添加：

alert('hi there');

到脚本的最顶部，在$(document).ready()包装器内。请注意，在 jsFiddle 上您看不到 document.ready 包装器，它是不可见的，所以只需像我一样将警报放在 javascript 块的顶部（指向我的新 jsFiddle 的链接在答案的底部）

接下来，我注意到您通过 ID 单独引用它们来启用/禁用多个控件。如果它们共享同一个类，您可以一次引用多个控件，因此我发明了class="orderentry"该属性并将该属性添加到每个控件中。这删除了 ​​8 行代码，使故障排除更加容易。

然后，我开始删除/取消删除。首先，我删除了 javascript 面板中除 之外的所有内容alert('hi there');，然后运行了 jsFiddle。警报弹了出来。伟大的。所以我使用 Ctrl+z 取消删除所有内容。接下来，我选择了除了下一个代码块之外的所有内容，并删除了选择。我运行了 jsFiddle，再次弹出警报。

我继续删除/取消删除，直到我发现警报不再起作用的地方——这揭示了有问题的代码块。只需要仔细研究该特定区域的语法并发现错误：

$('#txtOrder').attr({'disabled':'disabled')};  <== ERROR: note final parentheses

代替

$('#txtOrder').attr({'disabled':'disabled'});  <== CORRECT: note final parentheses

希望这会有所帮助，祝您项目的其余部分好运。

这是更正后的 jsFiddle

于 2013-09-11T17:27:08.583 回答
0

你没有分享你的 HTML，所以我对你的标记的样子做了假设。

在这里工作 jsFiddle

上面的 jsFiddle 是您正在创建的内容的简化版本。显然，它与您所做的非常不同，因此我可以快速创建它。

观察我是如何用 jQuery 完成某些事情的；拿走有用的，忽略其余的。

具体来说，您可以看到我最初是如何禁用 textarea 控件的：

$('#txtArea').attr({'disabled':'disabled'});

重新启用 textarea 控件进行编辑，同时隐藏 Edit 按钮并显示 Save 按钮：

$('#txtArea').removeAttr('disabled');
$('#btnSave').show();
$(this).hide();

重要的是，这是我确保每次添加都添加到（而不是覆盖）现有内容的方式：

var ord = 'Requested By: ' + $('#txtReq').val() + '\r\n';

很可能您已经知道我要指出的许多（大部分？）事情，但我不知道您知道什么，因此，请再次保留您认为有用的一两件事，而忽略其余的事情。我只希望我已经设法抓住了你此刻难倒的地方。

我很少推荐 W3Schools 来做任何事情，但是在这里查看他们对 jQuery 选择器、事件、方法的出色总结/参考。（继续点击Next Chapter以循环浏览此参考的所有页面）。

于 2013-09-06T16:59:10.153 回答