4

IEでサポートされていないことはわかっていますが、誰かが無料で提供できるほど寛大なクールなスクリプトをオンラインで見つけましたが、なぜそれが機能しないのか理解できません。私はこれを何時間も見つめています、正しい方向に私を向けてください！

私のコード：

<script language="javascript" type="text/javascript" src="getbyclass.js"></script>
<script type="text/javascript" language="javascript">
function editToggle(toggle){
    if (toggle == "off"){
    getElementsByClassName("editp").style.display ="none";
    document.getElementById('editToggle').innerHTML="<a href=\"#\" onclick=\"editToggle(\"off\"); return false;\">>Edit Mode: <span style=\"color:red;\">OFF</span></a>";
    toggle="on";
    }else{
    getElementsByClassName("editp").style.display ="inline";
    document.getElementById('editToggle').innerHTML="<a href=\"#\" onclick=\"editToggle(\"on\"); return false;\">>Edit Mode: <span style=\"color:green;\">on</span></a>";
    toggle="off";
    }
}

また：

echo "<span id=\"editToggle\"><a href=\"#\" onclick=\"editToggle(); return false;\">Edit Mode: <span style=\"color:red;\">OFF</span></a></span>";

からのコードはここgetbyclass.jsで見ることができます。

以下の回答に応えて、私はこれを試しました：

function editToggle(toggle){
    var list = getElementsByClassName("editp");
    if (toggle == "off"){
    //getElementsByClassName("editp").style.display ="none";
        for (index = 0; index < list.length; ++index) {
            list[index].style.display ="none";
        }
    document.getElementById('editToggle').innerHTML="<a href=\"#\" onclick=\"editToggle(\"off\"); return false;\">>Editfalse;\">Edit Mode: <span style=\"color:red;\">OFF</span></a>";
    toggle="on";
    }else{
    //getElementsByClassName("editp").style.display ="inline";
        for (index = 0; index < list.length; ++index) {
            list[index].style.display ="inline";
        }
    document.getElementById('editToggle').innerHTML="<a href=\"#\" onclick=\"editToggle(\"on\"); return false;\">>Editfalse;\">Edit Mode: <span style=\"color:green;\">on</span></a>";
    toggle="off";
    }
}

しかし、それはまだ機能していません。

4

4 に答える 4

16

getElementsByClassNameコレクションを返します。次のように、結果をループする必要がある場合があります。

var elements = document.getElementsByClassName('editp');
for(var i=0; i<elements.length; i++) { 
  elements[i].style.display='none';
}
  • elementsは、ツリーに表示される順序で見つかった要素のライブNodeListです。
  • namesは、照合するクラス名のリストを表す文字列です。クラス名は空白で区切られます
  • getElementsByClassNameは、ドキュメントだけでなく、任意の要素で呼び出すことができます。それが呼び出される要素は、検索のルートとして使用されます。

これを通過する必要があります。

于 2012-11-06T10:40:31.693 に答える
2

getElementsByClassNameNodeList（または組み込みでない場合は配列）を返しますが、プロパティHTMLElementを直接参照することで、のように使用しています。style

getElementsByClassName("editp").style.display ="none";
// here ------------------------^

displayからプロパティを取得しようとしているため、JavaScriptコンソールにエラーが表示されるはずですundefined（から）。getElementsByClassName("editp").styleundefined

最初に一致する要素を操作する場合：

var elm = getElementsByClassName("editp")[0];
if (elm) {
    elm.style.display ="none";
}

...またはそれらすべてに基づいて行動したい場合：

var index;
var list = getElementsByClassName("editp");
for (index = 0; index < list.length; ++index) {
    list[index].style.display ="none";
}

更新：

ある時点で、質問を編集しvar toggle = "off"てコードから削除し（グローバルスコープで、関数のすぐ上）、toggleへの引数を作成しましたeditToggle。ただし、引用符で囲まれたマークアップに従って何も渡されていません。editToggleたとえ渡さtoggleれたとしても、関数の引数である場合、関数内で新しい値を設定しても、関数が返された後は何も参照されないため、効果は持続しません。 。

于 2012-11-06T10:40:18.353 に答える
1

作成するマークアップには、終了していない文字列リテラルが含まれている可能性があります。また、他の投稿で言及されているように、他の問題がある可能性もあるようです。

変化する：

 "<a href=\"#\">Edit Mode: <span style=\"color:red;>OFF</span></a>";

に

"<a href=\"#\">Edit Mode: <span style=\"color:red;\">OFF</span></a>";

この状況は、作成する他のマークアップにも存在します。

変化する：

"<a href=\"#\">Edit Mode: <span style=\"color:green;>on</span></a>";

に

"<a href=\"#\">Edit Mode: <span style=\"color:green;\">on</span></a>";
于 2012-11-06T10:40:46.283 に答える
-1

の後にセミカラムがないようですvar toggle="off"。

editToggle()コードのどこかで呼び出すようにしてください。

ブラウザまたは拡張機能に組み込まれているインスペクタを使用することをお勧めします。たとえば、FirefoxまたはChromeInspectorのFirebug拡張機能。コンソールを使用してデバッグし、JavaScriptにエラーがあるかどうかを確認します。

于 2012-11-06T10:56:50.067 に答える