特定のクラスと属性を持つリンクを非表示にします

StackOverflow https://stackoverflow.com/questions/614064

  •  03-07-2019
  •  | 
  •  

質問

このhtmlを持っています。

<a class="link" href="www.website.com?id=233253">test1</a>
<a class="link" href="www.website.com?id=456456">test2</a>

href属性と最後の数字（233253）を使用してこれらのリンクの1つを非表示にして、このhref属性とクラス＆quot; link＆quot;のリンクを非表示にするにはどうすればよいですか？

これは機能するコードではなく、説明のためにまとめたものです。 getElementsByTagName（ 'a'）。class（ 'link'）。href =＆quot; * 233253＆quot;

更新： 残念ながら、ライブラリを使用せずに純粋なjavascriptである必要があり、IE6で動作する必要があります。

Update2： HTMLにアクセスできません

役に立ちましたか？

解決 

<html>
<head>
<script type="text/javascript">

function hideLinks(className, ids) {
    var links = document.getElementsByTagName("a");
    var max   = links.length;

    for (var i=0; i<max; i++) {
        var link   = new RegExp("(\s*)"+ className +"(\s*)");
        var isLink = link.test(links[i].className);

        if (isLink) {
            for (var j=0; j<ids.length; j++) {
                var regexp = new RegExp(ids[j] + "<*>quot;);
                var hasId  = regexp.test(links[i].href);

                if (hasId) {
                    links[i].style.display = "none";
                }
            }
        }
    }
}

window.onload = function() {
    hideLinks("link", [233253]);
}
</script>
</head>
<body>

<a class="link" href="www.website.com?id=233253">test1</a>
<a class="link" href="www.website.com?id=456456">test2</a>


</body>
</html>

編集：機能内への機能のカプセル化に関するコメントを読んだ後、新しいバージョンを投稿しました。これは以前のバージョンと同様に機能するはずです。

他のヒント

jQueryの使用：

$("a.link[href$='233253']").hide();

$ =属性セレクターは、選択された属性が指定された値で終わるすべての要素に一致します。

[編集]：コードは少しずさんでしたが、今は動作するはずです。 splitメソッドを含める（コメントを参照）。

a要素をループし、hrefを確認して非表示を適用します。このように：

var refs = document.getElementsByTagName('a');
for (var i=0;i<refs.length;i++) {
       if (
             refs[i].href &&
             refs[i].href.replace(/(\d+$)/,'$1').match('[your value to match]')
          ) {
           refs[i].className = refs[i].className.replace(/link/i,'');
           refs[i].style.display = 'none';
       }
}

または

for (var i=0;i<refs.length;i++) {
   var hs = refs[i].href.split(/=/)[1];
   if (  hs.match([your value to match]) ) {
       refs[i].className = refs[i].className.replace(/link/i,'');
       refs[i].style.display = 'none';
   }
}

攻撃はありませんが、ループを作成することは回避策のようです。リンクに一意のIDを追加できる場合は、明らかに推奨される方法です。

その後、「getElementById」を使用して、特定のリンクを非表示にする別のクラスを設定できます。

あるリンクと別のリンクの違いは何ですか？サーバー側でそれがわかっている場合は、適切なクラス名を追加し、静的な方法でCSSから非表示にします。

非表示が必要なものを動的に決定するには、HTML内でレンダリングしない限り、javascriptスニペットを動的に生成する必要があります。

更新：生成されたHTMLにアクセスできない場合、私の投稿は役に立ちません。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top