js 如何添加 href + 点击文本

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

演示

Answer 2

最简单的方法：

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

<小时 />

演示

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

Answer 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
});

你可以试试上面的代码

Answer 4

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

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

Answer 5

让我们使用纯javascript，我知道你想使用jQuery，但我真的确信太多人如果不使用纯javascript查看Web就无法做到这一点。所以这是一个好方法。

你可以从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 + 跨度文本 + suffix

跨度文本中的空格将转换为 -

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 结尾而不是 / ，您可以更改后缀。此方法还允许您使跨度具有大写的单词和空格。

捷轩