-6

複数のスパンがあります

<span id ="myId">data1</span>
<span id ="myId">data2</span>
<span id ="myId">data3</span>
<span id ="myId">data4</span>
<span id ="myId">data5</span>

1 回のボタンクリックですべてのスパン内のテキストを削除したい。

JavaScriptでボタンクリックでこれを試しました

document.getElementById("myId").innerHTML = "";

ただし、最初のスパンからのみテキストを削除しています

4

4 に答える 4

9

ID は一意、クラスは反復可能

HTML 内の の目的はid、ページ上で一意の要素を識別することです。複数の要素に同様のスタイルを適用したり、同様のスクリプトを使用したりする場合は、class代わりにa を使用します。

<span class="myClass">data1</span>
<span class="myClass">data2</span>
<span class="myClass">data3</span>
<span class="myClass">data4</span>
<span class="myClass">data5</span>

<input type="button" id="clearbutton" value="Clear Data">

では、テキストを削除しましょう

これで、これらの要素をすべて選択して、それらのテキストを好きなように設定できます。この例では、古いバージョンの IE がサポートしていないため、jQuery を使用することをお勧めしますgetElementsByClassName。

$('#clearbutton').click(function() {
    $('.myClass').text('');
});

動作デモへのリンク| jQueryへのリンク

またはバニラJSで

IE のサポートについて心配していない場合は、vanilla JavaScript を使用してこれを行うことができます。

function clearSpans() {
    var spans = document.getElementsByClassName("myClass");
    for(var i=0; i < spans.length; i++) ele[i].innerHTML='';
}

実際のデモへのリンク

注: getElementsByClassNameIEに追加できます

jQueryを使用する方が簡単で広く受け入れられているため、これを行うことはお勧めしませんが、この機能のために古いIEをサポートする試みがありました:

onload=function(){
if (document.getElementsByClassName == undefined) {
    document.getElementsByClassName = function(className)
    {
        var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
        var allElements = document.getElementsByTagName("*");
        var results = [];

        var element;
        for (var i = 0; (element = allElements[i]) != null; i++) {
            var elementClass = element.className;
            if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
                results.push(element);
        }

        return results;
    }
}
}

ソースへのリンク

于 2013-08-29T10:10:54.343 に答える
2

複数のタグに同じ ID を与えないでください。代わりにクラスを使用してください

  <span class ="myId">data1</span>
  <span class ="myId">data2</span>
  <span class ="myId">data3</span>
  <span class ="myId">data4</span>
  <span class ="myId">data5</span>

この関数を呼び出してクリアします

function clearAll()
{
    var ele= document.getElementsByClassName("myId");
    for(var i=0;i<ele.length;i++)
    {
      ele[i].innerHTML='';
    }
}
于 2013-08-29T10:05:08.033 に答える
1

ID の DOM に依存する DOM メソッドを使用しています。つまり、DOM ごとに、同じ ID を持つ要素は 1 つしか存在できません。

ただし、HTML で id 属性をそのように使用していないため、代わりに、id myId を持つすべての要素をクエリするセレクターを探しています。おそらく CSS から知っているでしょう。

document.querySelectorAll("#myId").innerHTML = '';

これはそのままでは機能しません。また、innerHTMLsetter をNodeListプロトタイプに追加する必要がありますが、それは簡単です。

Object.defineProperty(NodeList.prototype, "innerHTML", {
    set: function (html) {        
        for (var i = 0; i < this.length; ++i) {
            this[i].innerHTML = html;
        }
    }
});

オンライン デモはこちらにあります: http://jsfiddle.net/Pj4HD/

于 2013-08-29T10:51:48.723 に答える