【问题标题】：js How to add href + text onclickjs如何添加href + text onclick
【发布时间】：2015-04-25 14:58:42
【问题描述】：

我需要将 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/

【问题讨论】：

我在您的示例中没有看到 href。
我知道，我需要这样的东西
我明白了，检查我的答案。

标签： javascript jquery onclick autolink

【解决方案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

【讨论】：

有趣的想法，但如果您有父元素，您可以使用innerHTML 缩短内容。 innerText 在获取跨度值时也可能会更好

【解决方案2】：

最简单的方法：

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

演示

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

【讨论】：

另一个问题..与此相关..如何在点击的文本中用 - 替换空格？例如“关于我们”必须是 about-us/（最后一个斜杠/）
@VincenzoPiromalli 将其添加到我的答案中：)
mmm...单击文本后我需要斜杠example.com/CLICKED/ ...另一个问题..是否可以在单击的文本中从A更改为a，例如关于我们必须是关于-我们/
@VincenzoPiromalli 我的回答解决了所有这些问题
我该怎么办？我找不到选项！帮助！

【解决方案3】：

$(".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
});

你可以试试上面的代码

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案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。

【讨论】：

【解决方案6】：

你的方法

如果您总是要让 url 以某些东西开头，您可以这样做。它的设置方式是……

prefix + 跨度文本 + 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

【讨论】：

我需要在 url 的末尾传递每个不同的点击文本，例如：example.com/information example.com/about
@VincenzoPiromalli 是的，我修复并更新了我的答案。确实如此，prefix+THE_SPANS_TEXT+suffix
abt 我无法编辑表格单元格并添加文本:) 我只需要通过 js 传递
请详细说明我被否决的原因。我的答案表现得很好