0

getElementById通常はサーバーから Ajax を介して div または span 要素を設定するために使用した問題に遭遇することがよくあります。ただし、ユーザーが簡単に div を空にして、以前のページに戻ることができるようにしたいと考えています。たとえば、ページの別の場所をクリックします。クリックするとページがリロードされる小さな折りたたみアイコンを配置することに頼ってきましたが、それは明らかに最善の解決策ではありません.

誰でもdivをクリアする簡単な方法を提案できますか? 適切なハンドラーを見つけることについての予感がありますが、ハンドラーについてはあまり知りません。これが同じスクリプト内にある場合は素晴らしいことですが、どのアプローチでも大歓迎です。

現時点では、選択範囲を取得して検索するスクリプトが作成されています。結果が役に立たない場合は、ユーザーがクリックして div を空にできるようにしたいと思います。ただし、問題は実際に常に発生します。ここに私が現在取り組んでいる短縮コードがあります...

JS

function getSelection() {
  var sel = getSelection();
  if (sel=""){
    alert("Please select text");
  } else {
    //grab selection and search on it using Ajax
    //code for browsers...
    xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById('searchresults').textContent=xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET","search.php?q="+sel,true);
    xmlhttp.send();
  }
}

HTML

<a href="javascript:void(0)" onclick="getSelection()">click</a>
4

4 に答える 4

2

使わない理由

document.getElementById('searchresults').textContent="";

jqueryがあれば、

$("#searchresults").empty();
于 2012-12-22T11:22:37.850 に答える
1

これを行うためのすべての要素があります。関数のスピンオフgetSelection:

var clear = function(){
  document.getElementById('searchresults').textContent = "";
};


<a href="javascript:void(0)" onclick="clear()">clear</a>

注:控えめなアドバイス: インライン JS をバインド イベント ハンドラーに追加することから卒業する必要があります。

の外側でクリックが検出されたときにコンテンツをクリアする方法の 1 つは、 で生成されたsearchresultsイベントの伝播を停止することです。ただし、の外側のレベルでクリアします。searchresultsclicksearchresultsdocumentclicksearchresults

var searchresults = document.getElementById("searchresults")​;
var stop = function(evt){
    evt.stopPropagation();
};
var clear = function(){
    searchresults.innerHTML = "";
};
searchresults.addEventListener("click", stop, false);
document.addEventListener("click", clear, false);

これを実現するには、addEventListener(およびattachEventIE 対応の .)を使用する必要があります。

于 2012-12-22T11:25:26.410 に答える
0

私がこれを正しく読んでいる場合、一度に 1 つの div のみをクリアしたいので、要素の ID を保存できます。ユーザーが別の場所をクリックすると、保存された ID から要素が取得され、textContent が空白になります。それがあなたの探しているものであることを願っています。私は質問を誤解したかもしれません。

于 2012-12-22T11:24:55.263 に答える
0

次のような方法ですべての子孫ノードを削除できます...

var parentNode = document.getElementById('searchresults');

while (parentNode.hasChildNodes()) {
    parentNode.removeChild(parentNode.firstChild);
}

もちろん、jQuery の方が簡単です...

$("#searchresults").empty()
于 2012-12-22T11:39:11.640 に答える