Question

我最近通过创建一个待办事项列表网络应用here来学习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。有什么想法有什么不对吗？或者更改这些图标的方法可能更好？

谢谢！

Answer 1

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

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

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

可在此处找到一个简单示例：http://jsbin.com/iwakof/1/edit

_{我知道这不是你问题的直接答案，但请相信我这是要走的路}

Answer 2

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

你的问题的答案是 - 是的，有一个更简单的方法来实现这种效果 - 我将很快得到。但首先 - 我注意到你的todo应用程序的底部你包含了一个名为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，答案总是“有更好的方法”

Answer 3

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

 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然后设置或隐藏或可见。根据您目前正在做的事情，您并没有真正使浏览器做任何事情。

Answer 4

尝试使用Regex的全局选项（在第二个斜杠后看一下g）：

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

这是example。

来自developer.mozilla.org：

global：是否针对所有可能的方式测试正则表达式匹配字符串，或仅匹配第一个。

正则表达式只工作一次

4 个答案: