Question

我创建了一个带有“fragment”类的'a'元素。我正在寻找PHP / JS代码，它在所有URL内部类片段的末尾添加了一些额外的文本。

例如：

<a class="fragment" href="http://google.com/" target="_blank">click here</a>

以上代码应自动更改为

<a class="fragment" href="http://google.com/extratext" target="_blank">click here</a>

我尝试了这段代码，但根本不起作用。点击时的链接仍然会显示原始网址

$("a").click(function() {
$(this).prop("href", $(this).prop("href") + "extratext");
});

任何帮助将不胜感激！

Answer 1

试试这个。

attr 会返回您的标记属性。

$("a").click(function() {
   $(this).attr("href",$(this).attr("href") + "extratext"));
});

点击此处了解更多信息。 http://api.jquery.com/attr/

Answer 2

您可以使用setAttribute和getAttribute：

＆＃13;

window.addEventListener('DOMContentLoaded', function(e) {
  
  //
  // get all elements with that class
  //
  var fragments = document.getElementsByClassName('fragment');
  
  //
  // for each element attach the event handler
  //
  for(var i = 0; i<fragments.length; i++) {
    fragments[i].addEventListener('click', function(e) {
      
      // add extra text
      var href = this.getAttribute('href');
      this.setAttribute('href', href + 'extratext');
      
      console.log(this.outerHTML);
    }, false);
  }
});

＆＃13;

<a class="fragment" href="http://google.com/" target="_blank">click here</a>

＆＃13;

Answer 3

使用 attr 属性获取当前锚标记 href 。

$("a").click(function () {
  $(this).attr("href", $(this).attr("href") + "extratext");
});

<a class="fragment" href="http://google.com/" target="_blank">click here</a>

Answer 4

如果点击链接：

，此片段会附加href属性

＆＃13;

 document.getElementsByClassName("link")[0].addEventListener("click", function () {
      this.href += "extratext";
});

＆＃13;

<a class="link" href="http://google.com/" target="_blank">click here</a>

＆＃13;

如果您想阻止多次添加，请使用以下内容：

＆＃13;

 document.getElementsByClassName("link")[0].addEventListener("click", function () {
    if(this.hasExecuted) return; 
     this.href += "extratext";
     this.hasExecuted = true; 
});

＆＃13;

<a class="link" href="http://google.com/" target="_blank">click here</a>

＆＃13;

如果您想阻止多次添加到网址，但也要添加所有链接：

＆＃13;

NodeList.prototype.addEventListener = function(type, handler) {
    for(var node of this)
        node.addEventListener(type, handler);
}

HTMLCollection.prototype.addEventListener = function(type, handler) {
    for(var node of this)
        node.addEventListener(type, handler);
}
var hasExecuted = false;       
var links = document.getElementsByClassName("link");
links.addEventListener("click", function () {
    if(hasExecuted) return; 
     for(var link of links)
         link.href += "extratext";
     hasExecuted = true; 
});

＆＃13;

<a class="link" href="http://google.com/" target="_blank">click here</a>
<a class="link" href="http://http://stackoverflow.com/" target="_blank">click here too</a>

＆＃13;

如果您不想更改链接的实际href属性，请执行以下操作：

＆＃13;

       
 document.getElementsByClassName("link")[0].addEventListener("click", function () {
    var a = document.createElement("a");
    a.target = "_blank";
    a.href = this.href + "extratext";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}, false);

＆＃13;

<a class="link" href="http://google.com/" target="_blank">click here</a>

＆＃13;

该脚本是一个易于使用的功能：

＆＃13;

  openWithAppendedUrl(document.getElementsByClassName("link")[0], "sometext");

function openWithAppendedUrl(link, urlPart) {
    link.addEventListener("click", function () {
        var a = document.createElement("a");
        a.target = "_blank";
        a.href = this.href + urlPart;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }, false);
}

＆＃13;

<a class="link" href="http://google.com/" target="_blank">click here</a>

＆＃13;

Answer 5

或者，您可以找到所需元素的href，之后您可以设置其href属性的新值，该值将替换旧值，如下所示：

 <a class="fragment" href="http://stackoverflow/" target="_blank" onclick="addExtraText()">click here</a>

    function addExtraText() {
     var linkElement = document.getElementsByClassName("fragment")[0];
     linkElement.setAttribute('href', 'http://stackoverflow/questions/');
   }

在特定班级

5 个答案: