javascript - 追加 - jquery href 実行




jQueryを使ってハイパーリンクのhrefを変更する方法 (7)

Wordpress AvadaテーマのHREFを変更する

ShortCode Exec PHPプラグインをインストールした場合、私はmyjavascriptというショートコードを作成することができます

?><script type="text/javascript">
jQuery(document).ready(function() {
jQuery("div.fusion-logo a").attr("href","tel:303-985-9850");
});
</script>

Appearance / Widgetsに行き、フッターウィジェットの1つを選択し、テキストウィジェットを使用して以下のショートコードを追加することができます

[myjavascript]

セレクタは、どの画像を使用しているのか、網膜の準備ができているかによって変わりますが、開発者ツールを使用していつでも把握できます。

どのようにjQueryを使ってハイパーリンクのhrefを変更できますか?


jQuery 1.6以降では、以下を使用する必要があります。

$("a").prop("href", "http://www.jakcms.com")

propattrの違いは、 attrはHTML属性を取得し、 propはDOMプロパティを取得する点です。

この記事で詳しく知ることができます: .prop()と.attr()


OPが明示的にjQueryの回答を求めたとしても、最近はjQueryを使用する必要はありません。

jQueryを使用しないいくつかのメソッド:

  • すべての <a>要素のhref値を変更する場合は、それらをすべて選択してから、 nodelist反復処理します(example)

    var anchors = document.querySelectorAll('a');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://.com";
    });
    
  • 実際にhref属性を持つすべての<a>要素のhref値を変更するには、 [href]属性セレクタ( a[href] )を追加して選択します(example)

    var anchors = document.querySelectorAll('a[href]');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://.com";
    });
    
  • 特定の値を含む <a>要素(たとえばgoogle.com )のhref値を変更するには、属性セレクタa[href*="google.com"]ます(example)

    var anchors = document.querySelectorAll('a[href*="google.com"]');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://.com";
    });
    

    同様に、他の属性セレクタを使用することもできます 。 例えば:

    • a[href$=".png"] .png a[href$=".png"]は、 href値が.png終わる<a>要素を選択するために使用できます。

    • a[href^="https://"]は、 接頭辞https:// href値を持つ<a>要素を選択するために使用できます。

  • 複数の条件を満たす<a>要素のhref値を変更したい場合:( (example)

    var anchors = document.querySelectorAll('a[href^="https://"], a[href$=".png"]');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://.com";
    });
    

ほとんどの場合、正規表現の必要はありません。


このスニペットは、 'menu_link'クラスのリンクがクリックされると呼び出され、リンクのテキストとURLを表示します。 falseを返すと、リンクがフォローされなくなります。

<a rel='1' class="menu_link" href="option1.html">Option 1</a>
<a rel='2' class="menu_link" href="option2.html">Option 2</a>

$('.menu_link').live('click', function() {
   var thelink = $(this);
   alert ( thelink.html() );
   alert ( thelink.attr('href') );
   alert ( thelink.attr('rel') );

   return false;
});

すべての同じリンクを別のものに変更するか、ページの特定のセクションまたは個々のセクションの個々のリンクを個別に制御するかによって、これらのいずれかを行うことができます。

GoogleへのすべてのリンクをGoogleマップを指すように変更する:

<a href="http://www.google.com">

$("a[href='http://www.google.com/']").attr('href', 
'http://maps.google.com/');

特定のセクションのリンクを変更するには、コンテナdivのクラスをセレクタに追加します。 この例では、コンテンツのGoogleリンクは変更されますが、フッターには変更されません。

<div class="content">
    <p>...link to <a href="http://www.google.com/">Google</a>
    in the content...</p>
</div>

<div class="footer">
    Links: <a href="http://www.google.com/">Google</a>
</div>

$(".content a[href='http://www.google.com/']").attr('href', 
'http://maps.google.com/');

文書内のどこにあるかにかかわらず個々のリンクを変更するには、リンクにIDを追加し、そのIDをセレクタに追加します。 この例では、コンテンツの2番目のGoogleリンクは変更されますが、フッターの最初のリンクは変更されません。

<div class="content">
    <p>...link to <a href="http://www.google.com/">Google</a>
    in the content...</p>
    <p>...second link to <a href="http://www.google.com/" 
        id="changeme">Google</a>
    in the content...</p>
</div>

<div class="footer">
    Links: <a href="http://www.google.com/">Google</a>
</div>

$("a#changeme").attr('href', 
'http://maps.google.com/');

ルックアップでattrメソッドを使用します。 任意の属性を新しい値で切り替えることができます。

$("a.mylink").attr("href", "http://cupcream.com");

 $("a[href^='http://.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.\.com/, 
         "http://.com");
   });




hyperlink