js 如何添加href + text onclick

Question

我需要将 span 内的文本传递（使用 javascript）到 href

<div class='tableCell'><span>information</span></div>
<div class='tableCell'><span>contact</span></div>
<div class='tableCell'><span>about</span></div>

例如当我点击到大约 link 必须是例子。com/tag/about/

Answer 1

$(".tableCell span").click(function() {
    var link = $(this).text(), // will provide "about"
        href = "http://example.com/tag/"+link; // append to source url
    window.location.href=href; // navigate to the page
});

你可以试试上面的代码

Answer 2

您没有 link，但跨度在您的 html 中。但是，您可以构建所需的 href 并将其分配给现有的 link:

   $('div.tableCell').click(function(){
        var href = 'example.com/tag/' + $(this).find('span').text();
   })

Answer 3

你的方法

如果您总是想 url 从某件事开始，您可以这样做。它的设置方式是...

prefix + SPANS 文本 + suffix

THE SPANS TEXT 中的空格将被转换为 -

var prefix = 'http://example.com/tag/',
    suffix = '/';

$('span').click(function () {
  window.location.href = prefix + $(this).text().replace(' ', '-').trim().toLowerCase() + suffix;
  //An example is: "http://example.com/tag/about-us/"
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class='tableCell'><span>Information</span></div>
<div class='tableCell'><span>Contact</span></div>
<div class='tableCell'><span>About</span></div>

您可以轻松调整它，因此如果您希望它以 .html 而不是 / 结尾，您可以更改后缀。此方法还允许您使跨度具有大写的单词和空格。

JSBIN

Answer 4

最简单的方法：

$( "span" ).click(function() {
 var link = 'http://yousite.com/tag/'+ $(this).text().replace(/ /, "-")+"/";
 window.location.href= link.toLowerCase();
 });

演示

http://codepen.io/tuga/pen/yNyYPM

Answer 5

让我们使用 pure javascript，我知道你想使用 jQuery，但我敢肯定，如果不使用 pure [=35= 浏览网络，很多人都无法做到这一点].所以这里有一个好方法。

您可以从jsFiddle

关注它

var objectList = document.getElementsByClassName("tableCell");

for(var x = 0; x < objectList.length; x++){
    objectList[x].addEventListener('click', function(){
        top.location.href = "example.com/tag/" + this.childNodes[0].innerHTML;
    });
}

让我们研究代码，

var objectList = document.getElementsByClassName("tableCell"); 现在我们有了 class tableCell 的所有元素。在很多情况下，这比 $(".tableCell") 更好。
现在 objectList[x].addEventListener('click', function(){}); 使用此方法我们向每个对象添加了事件。
top.location.href = "example.com/tag/" + this.childNodes[0].innerHTML; 如果有人点击我们的带有 class 的元素：我们将把 link 更改为他的第一个子节点的文本。

希望对你有用，想提升自己的就尽量用纯js吧

Answer 6

这是我的答案。我正在使用 Javascript 来操纵 DOM 来添加一个新元素，其 href 等于 span 元素中的内部文本。

希望此回答对您有所帮助。谢谢

var spans = document.getElementsByTagName('span')
var baseUrl = 'http://example.com/tag/'
for(var i=0; i<spans.length; i++)
{
    var curElement = spans[i];
    var parent = curElement.parentElement;
    var newAElement = document.createElement('a');
    var path = baseUrl+curElement.innerHTML;
    newAElement.setAttribute('href', path);
    newAElement.appendChild(curElement);
    parent.appendChild(newAElement)
}

DEMO

js 如何添加href + text onclick

js How to add href + text onclick

javascript

jquery

onclick

autolink

你的方法

JSBIN

演示