Question

我正在尝试更改特定类的href属性onclick。但是，原始的href永远不会改变。

<a class="vendor" href="https://jsfiddle.net">JSFiddle.net</a>

window.addEventListener("load", fixlinks);

function fixlinks() {
  var link_class = document.getElementsByClassName("vendor")
  for (var i = 0; i < link_class.length; i++) {
    link_class[i].addEventListener("click", makeLinks(link_class[i]));
  }
}

function makeLinks(expr) {
  //RickRoll 'em
  expr.setAttribute("href", "https://www.youtube.com/embed/dQw4w9WgXcQ");
}

//jsfiddle.net/qm9bnvon/5/

Answer 1

解决方案只是不调用函数而是传递它，并使用this来引用处理程序中的绑定元素。

更新了DEMO： http://jsfiddle.net/qm9bnvon/11/

window.addEventListener("load",fixlinks);

function fixlinks() {
    var link_class = document.getElementsByClassName("vendor")
    for(var i = 0; i < link_class.length; i++) { // v----pass it, don't invoke it
        link_class[i].addEventListener("click", makeLinks);
    }
}

function makeLinks(event) {
//   v---`this` refers to the bound element
    this.setAttribute("href","https://www.youtube.com/embed/dQw4w9WgXcQ");
}

Answer 2

如果document.readyState属性为complete，则onload处理程序将不会触发。（这至少是你在问题中链接的jsfiddle的情况）。所以你需要检查两种情况：

if(document.readyState === "complete") {
    fixlinks();
} else {
    window.addEventListener("load",fixlinks);
}

下一个问题是您没有在点击监听器中设置回调。因为makeLinks没有为点击处理程序返回一个函数来调用：

function fixlinks() {
    var link_class = document.getElementsByClassName("vendor")
    for(var i = 0; i < link_class.length; i++) {
        link_class[i].addEventListener("click",makeLinks(link_class[i]));
    }
}

// here we return the callback
function makeLinks(expr) {
    //RickRoll 'em
    return function() {
        expr.setAttribute("href","https://www.youtube.com/embed/dQw4w9WgXcQ");
    };
}

addEventListener在单击时不修改href

2 个答案: