英文:
Get Text of Link when Clicked in JavaScript
问题
以下是一个在我接手的项目中的网址示例。
单击链接时，我需要获取文本“单击链接”。
我已经在网上搜索过，所有的建议都不起作用。
任何帮助都将不胜感激。
<a href="site/page" onclick="loadContent('https://site/page.com');">
<span class="navitem">单击链接</span>
</a>
在一个 span 标签中的文本。
我尝试过：
$('.navitem').on('click', 'a', function() {
var text = $(this).text();
});
但控制台显示“$未定义”。
我还尝试过：
$('a').live('click', function() {
window.location.href = $(this).closest('span').text();
});
英文:
Below is a sample of a URL that is in a site (project that I inherited).
When clicking on the link, I need to get the text "Click Link".
I have searched the web and all suggestions do not work.
Any help is appreciated.
<a href="site/page" onclick="loadContent('https://site/page.com');">
<span class="navitem">Click Link</span>
</a>
The text in a span tag.
I've tried
$('. navitem').on('click', 'a', function() {
var text = $(this).text();
});
But Console log says $ not defined.
I also tried
$('a').live('click', function() {
window.location.href = $(this).closest('span').text();
});
答案1
得分: 1
document.querySelector('a').addEventListener('click', function() {
var text = this.querySelector('span').textContent
// Do anything with text
console.log(text)
})
英文:
document.querySelector('a').addEventListener('click', function() {
var text = this.querySelector('span').textContent
// Do anything with text
console.log(text)
})
答案2
得分: 1
你的第一个代码片段包含两个错误。更正如下：
$('.navitem').on('click', function () {
var text = $(this).text();
window.location.href = text; //?? 无论你想要做什么
});
在.navitem之间有一个不必要的空格。另一个错误在于on方法。我移除了传递的参数a。
根据你上一个评论 - 在你的问题下方 - 你需要将其包装在：
$(document).ready(function() {
$('.navitem').on('click', function () {
var text = $(this).text();
window.location.href = text; //?? 无论你想要做什么
});
});
另一个问题是你的HTML代码片段。所呈现的代码没有意义：
<a href="site/page" onclick="loadContent('https://site/page.com');">
<span>...</span>
</a>
你的a标签重叠了span标签，而href属性重叠了onclick属性，所以href的值会首先被执行。你添加的span元素的代码不会被执行。
英文:
Your first code snippet contains two misstakes. Change this one by
$('.navitem').on('click', function ()
{
var text = $(this).text();
window.location.href = text; //?? What eveer you want to do that
});
There was an unnessacry space between '.' and 'navitem'. Another one was in the on method. I removed the passed parameter 'a'.
Based on your last comment - underneath your question- you have to wrap this into
$(document).ready(function()
{
$('.navitem').on('click', function ()
{
var text = $(this).text();
window.location.href = text; //?? What eveer you want to do that
});
});
Another point is your html code snippet. The presented code makes not sense:
<a href="site/page" onclick="loadContent('https://site/page.com');">
<span>...</span>
</a>
Your a tag overlaps you span tag and the href attribute overlaps the onclick attribute, so the value of href will be executed first. Your added code for span element won't be executed.
答案3
得分: 0
在你的以下jQuery代码中：
$('.navitem').on('click', 'a', function() {
var text = $(this).text();
});
你在navitem的a上绑定了事件，但在你的情况下是不正确的。应该像下面这样修改成 $('a').on('click', '.navitem')。我已经在下面的代码片段中更新了这个点击事件。
$('.navitem').off("click").on('click', function(e) {
e.preventDefault();
var text = $(this).text();
console.log(text);
});
类似地，当在你的第二段代码中使用live方法时，可能会出现以下错误：
Uncaught TypeError: $(...).live 不是一个函数
这是因为live API从jQuery 1.9版本开始已经被弃用并移除。
英文:
In your following jQuery code:
$('.navitem').on('click', 'a', function() {
var text = $(this).text();
});
you have deleget event on a of navitem which in your case is incorrect. It need to be something like $('a').on('click', '.navitem'). I have update this click event in following snippet.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('.navitem').off("click").on('click', function(e) {
e.preventDefault();
var text = $(this).text();
console.log(text);
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="site/page" onclick="loadContent('https://site/page.com');">
<span class="navitem">Click Link</span>
</a>
<!-- end snippet -->
Similarly, when using live method in your, second code you might get
> Uncaught TypeError: $(...).live is not a function
this is because the live API is deprecated has been removed since jQuery 1.9
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论