javascript - JavaScriptでデータがnullの場合、入力を作成できません

Question

サンプルコードがあります

<script type="text/javascript">
function remove_news(id) {
    try {
        $('news_list').removeChild($('news_'+id));
        $('news_list').removeChild($('input_news_'+id));
        if($('news_list') == '') {
            var input = document.createElement('input');
            input.setAttribute("type", "hidden");
            input.setAttribute("name", "news_id");
            input.setAttribute("value", "0");
            document.getElementById("news_list").appendChild(input);
        }
    } catch(err){}
}
</script>
<div id="news_list">
<div id='news_1'> News no 1 <a href='#' onclick='remove_news(1); return false;'>[Delete]</a></div>
<input type="hidden" id="input_news_1" name="news_id" value="1" />
</div>

コードを実行すると、削除リンクを選択しても結果が表示されない<input type="hidden" name="news_id" value="0" />

それを修正する方法?

score 1 · Accepted Answer

#news_idjQueryセレクターとして、などを使用する必要があります#。

try {
    $('#news_list').removeChild($('#news_'+id));
    $('#news_list').removeChild($('#input_news_'+id));
    if($('#news_list').html() == '') {
        var input = document.createElement('input');
        input.setAttribute("type", "hidden");
        input.setAttribute("name", "news_id");
        input.setAttribute("value", "0");
        document.getElementById("news_list").appendChild(input);
    }
 } catch(err){}

ただし、jQueryと通常のJavaScriptを混在させる必要はありません。jQueryを使用しているので、すべてのjQueryを使用することもできます。上記が機能することを保証するものではありません。

try {
    // Instead of removing a child node, just remove the element directly:
    $('#news_'+id).remove()
    $('#input_news_'+id).remove();
    if($('#news_list').html() == '') {
        var input = $.create("<input type='hidden' name='news_id' value='0'>");
        $('#news_list').append(input);
    }
 } catch(err){}

score 0 · Accepted Answer

オブジェクトが存在するかどうかを確認する場合は、jQuery オブジェクトを空の文字列と比較しないでください。

if($('news_list') == '') { ...}

長さがゼロでないことを確認します。他の誰かが言及したように、要素を識別するためのハッシュが欠落しているようです。

if($('#news_list').length == 0) { ...}

さらに、この if ステートメントのロジックには欠陥があるようです。そこにあるかどうかを確認news_listしますが、最後の行で同じ ID で要素を取得しようとします。先ほど述べたように、文字列に対してオブジェクトをクエリしているため、わかりにくいです。それは意味がありません。

    if($('news_list') == '') {
        var input = document.createElement('input');
        input.setAttribute("type", "hidden");
        input.setAttribute("name", "news_id");
        input.setAttribute("value", "0");
        document.getElementById("news_list").appendChild(input); //doesn't exist?
    }

score 0 · Accepted Answer

いくつかのコメント:

> function remove_news(id) {
>      try {

ここでは、try..catch はまったく必要ありません。パディングされたセルではなく、防御的にコーディングします。

>          $('news_list').removeChild($('news_'+id));
>          $('news_list').removeChild($('input_news_'+id));

jQuery とプレーンな JavaScript の間で競合しているように見えるので、次のようにします。

  var news_list = document.getElementById('news_' + id);
  news_list && news_list.parentNode.removeChild(news_list);

  var input_news_list = document.getElementById('input_news_' + id);
  input_news_list && input_news_list.parentNode.removeChild(input_news_list);

> 
>          if($('news_list') == '') {

その要素を DOM から削除しただけなので、そこには見つかりません。それを空の文字列と比較するのも悪い選択です。これは、要素がドキュメント内にあるかどうかを確認するためのテストだと思います。不要ですので、取り外し可能です。

>              var input = document.createElement('input');
>              input.setAttribute("type", "hidden");
>              input.setAttribute("name", "news_id");
>              input.setAttribute("value", "0");

やりたいことが値をクリアすることだけなのに、なぜそんなことをするのでしょうか? とにかく、 setAttribute 呼び出しを捨てて、プロパティを直接設定する方が簡単です:

  var input = document.createElement('input');
  input.type = 'hidden';
  input.name = 'news_id';
  input.value = '0';

>              document.getElementById("news_list").appendChild(input);
>          }     
>     } catch(err){}  }

HTML（便宜上私のラッピング）：

> <div id='news_1'> News no 1 <a href='#' onclick='remove_news(1);
>  return false;'>[Delete]</a></div>

A 要素が必要ないのに、なぜ A 要素を使用するのでしょうか。スパンを使用して適切にスタイルを設定します (または、禁止されているボタン)。

<div ...><span onclick="remove_news(1);">...</span></div>

div の id を使用して関数をより一般的にすることができるので、呼び出しでそれを渡す必要はありません。次に、クリックがどこから来たのかを確認し、そこからそれを処理する先祖に1つのリスナーを接続するだけです(つまり、デリゲート)。

score 0 · Accepted Answer

私がそれを正しく理解していて、あなたがjQueryを使用しているのを見れば:

function remove_news(id) {
    var newsList = $('#news_list');          //cache news list

    $('#news_'+id,newsList).remove();       //then remove the news
    $('#input_news_'+id,newsList).remove(); //as well as the accompanying input

    if(newsList.length){                    //and if there is no news left
        $('<input type="hidden">').attr({   //create a hidden input
            'name':'news_id',               
            'value':'0'
        }).appendTo(newsList);              //and append to list
    }
}

の説明$('<input type="hidden">')は、 IE が次のような動的入力変更をサポートしていないことです。$('<input>').attr({'type':'hidden'})

javascript - JavaScriptでデータがnullの場合、入力を作成できません

4 に答える 4

Related

Reference