2

私は最近、ここでやることリストのWebアプリを少し作成してJavaScriptを学んでいます。

これまでのところほとんどすべてが機能していますが、アイテムを複数回チェックおよびチェック解除しようとすると問題が発生します。チェック/チェックを外し続けると、削除ボタンが消え-->て緊急アイコンの後に表示されます。

アイコンの変更は、Regexのコードをコメント付きからコメントなしに変更することによって行われます。一度は機能すると毎回機能しないのはなぜかわかりません。

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 を学んでいることは素晴らしいことです。良くやった。しかし、いくつかのポインターを使用できるように見えるので、この質問を投稿してよかったです。

あなたの質問への答えは - はい、この効果を達成するためのはるかに簡単な方法があります - それについてはすぐに説明します。しかし最初に、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 を作成していることに気付いた場合、答えは常に「もっと良い方法があります」です。

于 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を表示または非表示にすることです。もちろん、2つのdivを用意してから、またはを非表示または表示に設定する必要があります。あなたが現在していることでは、あなたは実際にはブラウザに何もさせていません。

于 2013-03-05T21:53:06.213 に答える
0

正規表現のグローバルオプションを使用してみてください（2番目のスラッシュの後のgを見てください）：

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

これが例です。

developer.mozilla.orgから：

グローバル：文字列内のすべての可能な一致に対して正規表現をテストするか、最初の一致に対してのみテストするか。

于 2013-03-05T21:35:11.740 に答える