2

我最近通过在此处创建一个待办事项列表 Web 应用程序来学习 JavaScript 。

到目前为止，几乎一切正常，但是如果您尝试多次选中和取消选中一个项目，我会遇到问题。如果您继续选中/取消选中，您会看到删除按钮消失并-->出现在紧急图标之后。

图标的更改是通过正则表达式将代码从已注释更改为未注释来完成的。我只是不明白为什么如果它只工作一次，它就不能每次都工作？

if (tr.outerHTML.indexOf("checked=\"\"") >= 0) {

    // replace checked with unchecked
    var cookieHTML = tr.outerHTML.replace(/checked=\"\" class=\"list-checkbox\"/, 'class=\"list-checkbox\"')
    .replace(/<tr class=\"list-row done\"/, '<tr class=\"list-row\"')


    // change delete button to urgency.
    .replace(/<!--<span aria-hidden=\"true\" data-icon=\"c\"/, '<span aria-hidden="true" data-icon="c"')
    .replace(/alt=\"Neutral\"><\/span>-->/, 'alt="Neutral"></span>')

    .replace(/<!--<span aria-hidden=\"true\" data-icon=\"f\"/, '<span aria-hidden="true" data-icon="f"')
    .replace(/alt=\"Urgent\"><\/span>-->/, 'alt="Urgent"></span>')

    .replace(/<span aria-hidden=\"true\" data-icon=\"e\"/, '<!--<span aria-hidden="true" data-icon="e"')
    .replace(/onclick=\"deletetodo\(this\)\"><\/span>/, 'onclick="deletetodo(this)"></span>-->');

} else {

    // else add checked to the input.
    var cookieHTML = tr.outerHTML.replace(/class=\"list-checkbox\"/, 'checked class=\"list-checkbox\"')
    .replace(/<tr class=\"list-row\"/, '<tr class=\"list-row done\"')


    // change urgency to delete button.
    .replace(/<span aria-hidden=\"true\" data-icon=\"c\"/, '<!--<span aria-hidden="true" data-icon="c"')
    .replace(/alt=\"Neutral\"><\/span>/, 'alt="Neutral"></span>-->')

    .replace(/<span aria-hidden=\"true\" data-icon=\"f\"/, '<!--<span aria-hidden="true" data-icon="f"')
    .replace(/alt=\"Urgent\"><\/span>/, 'alt="Urgent"></span>-->')


    .replace(/<!--<span aria-hidden='true' data-icon='e'/, '<span aria-hidden="true" data-icon="e"')
    .replace(/onclick='deletetodo\(this\)'><\/span>-->/, 'onclick="deletetodo(this)"></span>');

}

这是控制它的（相当大的！）JS 块。有什么想法有什么问题吗？或者也许是改变这些图标的更好方法？

谢谢！

4

4 回答 4

4

我会说：你做错了。使用字符串/正则表达式替换方法不是正确的方法。

而不是做那些替换使用 DOM 方法，即：

someElement.setAttribute('data-icon', 'f');
someElement.setAttribute('alt', 'Urgent');

一个简单的例子可以在这里找到：http: //jsbin.com/iwakof/1/edit

我知道这不是您问题的直接答案，但相信我这是要走的路

于 2013-03-05T21:46:06.823 回答
2

你正在学习 JavaScript 真是太棒了。不错的工作。但是，我很高兴您发布了这个问题，因为看起来您可以使用几个指针。

你的问题的答案是——是的，有一种更简单的方法可以实现这种效果——我很快就会讲到。但首先 - 我注意到在您的待办事项应用程序的底部，您包含一个名为 JQuery 的库

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

这个库将对您有很大帮助，不仅在您上面描述的函数中，而且对您编写的大部分代码都有帮助。你最终会得到更清晰和自我解释的代码。

http://jquery.com/

基本上，JQuery 允许您做的是操纵 DOM 的状态。你肯定想从这里开始。

这是一个小示例，它显示了一个可以选中或取消选中的复选框，并且在更改时，可以根据需要显示或隐藏一个元素。

http://jsfiddle.net/m4vGE/5/

请 - 花时间看看 JQuery - 这是你可以采取的很好的第一步，可以提高你的生产力并降低 JavaScript 的复杂性

另外 - 作为旁注，如果你发现自己使用 js 来构建带有字符串的 HTML，答案总是“有更好的方法”

于 2013-03-05T22:21:45.400 回答
1

如果您要做的只是根据是否选中复选框来更改图标，您可以执行类似的操作。

 function getVisibility()
{
  var temp = document.getElementById("iconName").style.visibility;

  return temp;
}

function switchIfChecked()
{

  var current = getStyle();

  if( current == "visible" )
   {
     document.getElementById("iconName").style.visibility = "hidden";
   }
   else
   {
     document.getElementById("iconName").style.visibility = "visible";
   }
}

<div id="iconName" style="visibility: visible">INSERT ICON IMG here</div>

上面所做的是它使图标的 div 可见或隐藏。当然，您需要有两个 div，然后将或设置为隐藏或可见。就你目前正在做的事情而言，你并没有真正让浏览器做任何事情。

于 2013-03-05T21:53:06.213 回答
0

尝试使用正则表达式的全局选项（查看第二个斜杠后的 g）：

// ...
.replace(/<tr class=\"list-row done\"/g, '<tr class=\"list-row\"')
// ...

这是一个例子。

来自developer.mozilla.org：

global：是针对字符串中所有可能的匹配项测试正则表达式，还是仅针对第一个匹配项进行测试。

于 2013-03-05T21:35:11.740 回答