样本

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>

例如，当我点击关于链接时，必须是example.com/tag/about /

Answer 1

这是我的答案。我使用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

Answer 2

$(".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 3

你的html中没有链接但是跨越了。但是，您可以构建所需的href并将其分配给现有链接：

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

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

让我们使用纯JavaScript，我知道你想使用jQuery，但我确信太多人不能在没有用纯javascript访问网页的情况下做到这一点。所以这是一个好方法。

您可以从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"); 现在我们拥有类tableCell的所有元素。在很多情况下，这比$(".tableCell")要好。
现在objectList[x].addEventListener('click', function(){});使用此方法我们向每个对象添加了事件。
top.location.href = "example.com/tag/" + this.childNodes[0].innerHTML;如果有人用类点击我们的元素，则使用此行：我们将链接更改为他的第一个子节点的文本。

我希望它有用，如果你想改善自己，尝试使用纯粹的js。

Answer 6

您的方法

如果你总是要让网址开始，你可以做这样的事情。它的设置方式是......

prefix + SPANS TEXT + suffix

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

＆＃13;

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/"
});

＆＃13;

<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>

＆＃13;

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

js如何添加href +文本onclick

6 个答案:

样本

您的方法

JSBIN