8

我正在与客户合作,我只被允许使用 javascript(不要问为什么,因为我不知道)。他们没有 jquery 设置并且他们不想要它(我再一次不知道为什么)

无论如何,页面上有一个链接,他们希望将 href 更改为页面加载。下面是链接结构。

<a class="checkout_link" title="Checkout" href="current_url">Checkout</a>

我想知道是否有任何方法可以使用上面链接的基本 javascript 更改页面加载时的 href?如果是这样,我将如何去做?

谢谢

4

3 回答 3

15
window.onload=function() {
  var links = document.links; // or document.getElementsByTagName("a");
  for (var i=0, n=links.length;i<n;i++) {
    if (links[i].className==="checkout_link" && links[i].title==="Checkout") {
      links[i].href="someotherurl.html";
      break; // remove this line if there are more than one checkout link
    }
  }
}

更新以包含更多获取链接的方法

document.querySelector("a.checkout_link"); // if no more than one
document.querySelectorAll("a.checkout_link"); // if more than one

更有选择性:

document.querySelector("a[title='Checkout'].checkout_link"); 

最后,较新的浏览器有一个 classList

if (links[i].classList.contains("checkout_link") ...

window.onload = function() {
  alert(document.querySelector("a[title='Checkout 2'].checkout_link").href);
}
<a href="x.html" class="checkout_link" title="Checkout 1" />Checkout 1</a>
<a href="y.html" class="checkout_link" title="Checkout 2" />Checkout 2</a>

于 2011-03-07T14:37:19.030 回答
0

这是jsfiddle 演示

您应该使用 ondomready 事件,但是在使用 vanilla 进行编码时有点棘手(建议使用 JavaScript 框架)。因此,作为替代方案(不是实现您想要做的事情的最佳方式),是使用窗口加载(根据您的要求)。在 JavaScript 中,我们附加了一个改变<a>窗口加载后 href 的函数:

html:

<a class="checkout_link" title="Checkout" href="current_url">Checkout</a>

基于 JavaScript 的 title 是唯一的,并且在 class 属性中还包含 checkout_link:

    window.onload = function() {
        var tochange = document.getElementsByTagName('a');
        for (var i = 0; i < tochange.length; i++) {
            //checks for title match and also class name containment
            if (tochange[i].title == 'Checkout' && tochange[i].className.match('(^|\\s+)checkout_link(\\s+|$)')) {
                tochange[i].href = "http://www.google.com";
                break;  //break out of for loop once we find the element
            }
        }
    }
于 2011-03-07T14:31:12.300 回答
0

您可以通过其类名获取对象,请查看此链接:http ://snipplr.com/view/1696/get-elements-by-class-name/

然后用它来改变href。

于 2011-03-07T14:35:34.450 回答