Javascript選擇div並在內部更改href

Question

我正在嘗試使用JavaScript修改頁面中的鏈接。 我可以選擇div和a元素，但是不能更改href。

Shopify使用for循環生成這些對象，並且需要每個對象具有不同的鏈接。

這是HTML：

<div id="tri-banner-1" class="banner-element banner-1 col-sm-4">
                <a href="collections/all"><div class="home-banner">                  
                  <img src='//cdn.shopify.com/s/files/1/1093/4220/t/2/assets/group_top_banner01.png?17711418137279289271' alt="">
                  <div class="banner-caption">
                    <div class="display-table">
                      <div class="display-tablecell">

                      </div>
                    </div>                        
                  </div>                 
                </div></a>                                     
              </div>  



              <div id="tri-banner-2" class="banner-element banner-2 col-sm-4">
                <a href="collections/all"><div class="home-banner">                  
                  <img src='//cdn.shopify.com/s/files/1/1093/4220/t/2/assets/group_top_banner02.png?17711418137279289271' alt="">
                  <div class="banner-caption">
                    <div class="display-table">
                      <div class="display-tablecell">

                      </div>
                    </div>                        
                  </div>                 
                </div></a>                                     
              </div>  



              <div id="tri-banner-3" class="banner-element banner-3 col-sm-4">
                <a href="collections/all"><div class="home-banner">                  
                  <img src='//cdn.shopify.com/s/files/1/1093/4220/t/2/assets/group_top_banner03.png?17711418137279289271' alt="">
                  <div class="banner-caption">
                    <div class="display-table">
                      <div class="display-tablecell">

                      </div>
                    </div>                        
                  </div>                 
                </div></a>                                     
              </div> 

這是我的JavaScript。

<script type="text/javascript">

  $(window).bind("load", function() {
      window.alert("Test");
      var banner1 = document.getElementById("tri-banner-1");
      var banner1Links = banner1.getElementsByTagName("a");
      banner1Links.href="facebook.com";
  });
</script>

Answer 1

banner1.getElementsByTagName("a"); 返回一個HTMLCollection 。 您應該使用索引選擇元素； 例如;

// set `href` of first `a` element in `bannerLinks`
banner1Links[0].href = "facebook.com";

或迭代集合

for (var i = 0; i < bannerLinks.length; i++) {
  bannerLinks[i] = /* set `href` here */;
}

Answer 2

banner1Links獲取一個數組值，因此您需要在該數組中循環，並為每個數組元素傳遞該值

// instead of banner1Links.href="facebook.com";

for(var i = 0; i < banner1Links.length; i += 1){
  banner1Links[i] = 'http://example.com';
}