0

次のリンクがある場合:

    <a href="#" onclick="return navigateTo(this)" id="menuList:0:menu" class="normalLink">
        <span id="menulist:0:menuLabel">
            <span > Main Page </span>
        </span>
    </a>        
    
    <a href="#" onclick="return navigateTo(this)" id="menuList:1:menu" class="normalLink">
        <span id="menulist:1:menuLabel">
            <span > Search Orders </span>
        </span>
    </a>
    
    <a href="#" onclick="return navigateTo(this)" id="menuList:2:menu" class="selectedLink">
        <span id="menulist:2:menuLabel">
            <span > Orders History </span>
        </span>
    </a>

selectedLinkクラス名を持つ要素を取得し、その要素の内部の値をspan上記の例で示している場所に取得したいと考えていOrder Historyます。

クラスを持つ要素を見つける最初の部分はできますがselectedLink、その要素の内部スパン内のテキストを取得することはできません。以下は、 class を持つ要素を見つけるための私のコードですselectedLink:

    var elem = this.getElementsByTagName('*');
    for (var i = 0; i < elem.length; i++) 
    {
        var classes = elem[i].className;
        if(classes == 'selectedLink' ){
            alert("ok found it the selected link");
        }
    }

誰も取得する方法を提案できますOrder Historyか? ありがとう

更新: フォローアップの質問

したがって、この演習のポイントは、ページが「注文履歴」であるにもかかわらず、ナビゲーションメニューselectedLinkに別のページにスタイルが適用されているかどうかのチェックを追加したかった (ユーザーが [戻る] を押したときに発生する) JavaScript ロジックで問題を修正したかったので、以下は私のコードです：

            //get the element that has "selectedLink" style
           // if the text says "Order History" then style is applied ok  
           var elems =  document.getElementsByClassName("selectedLink");
           if(typeof elems != "undefined"){
               for(var i = 0; i < elems.length; i++){
                   alert(elems.length);
                   var text = elems[i].innerText || elems[i].textContent;
                   alert(text);
                   if(text == "Order History"){
                       alert("its ok");
                   }
                   else { //we're here because the element that has "selectedLink" style in not "order History"
                   
                        //get all elements that have "normalLink" style and see which one is "Order History"
                       var allLinks = document.getElementsByClassName("normalLink");
                       for(var j = 0; j < allLinks.length; j++ ){
                           var curText = allLinks[j].innerText || allLinks[j].textContent;
                          
                           if(curText == "Order History"){
                               alert("there it is at counter " + j);
                               alert(allLinks[j].innerText);
                               
                               //swap the class names
                               allLinks[j].className = "selectedLink";
                               elems[i].className = "normalLink";
                               break;
                           }
                       }
                   }
                }
            }

クラス名の変更ビットが機能していません! 私はそれを間違っていますか？

更新 2:

修正しました、それは私のばかげた間違いでした:

次の順序を変更しました:

    allLinks[j].className = "selectedLink";
    elems[i].className = "normalLink";

に：

    elems[i].className = "normalLink";
    allLinks[j].className = "selectedLink";
4

3 に答える 3

3

まず、getElementsByClassName()要素を取得するために使用するだけで、多大な労力を節約できます。

var link = document.getElementsByClassName("selectedLink")[0]; // new browsers only
var link = document.querySelector(".selectedLink"); // more support, but not in IE7 or lower
var link = $(".selectedLink"); // with jQuery

次に、そのテキストが唯一のテキストであるため、textContent(innerText古い IE では) を使用できます。

エンド コードは、ターゲット ブラウザーに応じて、またフレームワークがあるかどうかに応じて、次のいずれかになります。

var text = link.textContent; // new browsers
var text = link.innerText || link.textContent; // older browers
var text = link.text(); // jQuery
于 2012-06-13T23:57:13.440 に答える
0

これを試して：

var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) 
{
    var classes = elem[i].className;
    if(classes == 'selectedLink' ){
        alert("ok found it the selected link");
        var a = elem[i].getElementsByTagName('span')[1].innerHTML;
        alert(a);
    }
}

JSBin
http://jsbin.com/epoxej/edit#preview

于 2012-06-14T00:12:48.203 に答える
0

これは jquery にとって完璧な仕事のように思えます。ページに jquery ライブラリを含めてから、次のコードを使用します。

var text = $('.selectedLink').first('span').first('span').html();
于 2012-06-13T23:59:03.923 に答える