jQuery/js-如何从基于 href 的类中获取菜单名称答案

【问题标题】：jQuery/js- How to get Menu Name from a href based classjQuery/js-如何从基于 href 的类中获取菜单名称
【发布时间】：2015-05-12 04:53:35
【问题描述】：

我想在用户点击时获取菜单名称。

<a class="menu" onclick="getMenu()" href="#"> Home </a>
<a class="menu" onclick="getMenu()" href="#"> About</a>
<a class="menu" onclick="getMenu()" href="#"> Contact</a>

所以在这个函数中会弹出警报名称。

function getMenu(){
 //the code declare here
alert('is click');
}

预期结果主页是点击/联系是点击

【问题讨论】：

您在下面有一些很棒的答案！分享了几种不同的方法。

标签： javascript jquery

【解决方案1】：

像这样，将this（指当前元素）传递给您的函数getMenu，并从链接中获取内容，您可以使用.innerHTML。

function getMenu(el) {
  alert(el.innerHTML + ' is click');  
}

<a class="menu" onclick="getMenu(this)" href="#"> Home </a>
<a class="menu" onclick="getMenu(this)" href="#"> About</a>
<a class="menu" onclick="getMenu(this)" href="#"> Contact</a>

您也可以使用.textContent 获取内部文本，但请注意IE lower than 9 不支持它，也有.innerText 但FF does not support it，您可以使用小变通方法来获取所有bworsers 中的内部文本，像这样

alert((el.innerText || el.textContent) + ' is click');

【讨论】：

【解决方案2】：

如果你想要一个 jQuery 方法......

您不需要onclick 属性

this - 用于触发函数的元素

.textContent - 元素的文本内容

.trim() - 删除空格

this.textContent.trim()

元素>文字内容>修剪

$('.menu').click(function(){
alert(this.textContent.trim());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="menu" href="#"> Home </a>
<a class="menu" href="#"> About</a>
<a class="menu" href="#"> Contact</a>

我希望这会有所帮助。编码愉快！

【讨论】：

【解决方案3】：

在使用 jQuery 时使用更简洁的方式：

<a class="menu" id="1"  href="#"> Home </a>
<a class="menu" id="2"  href="#"> About</a>
<a class="menu" id="3"  href="#"> Contact</a>

<script>
$(".menu").click(function(){
    var currentId = $(this).attr("id");
    alert($.trim($("#"+currentId).text()));
});
</script>

$(".menu").click(function(){
        var currentId = $(this).attr("id");
        alert($.trim($("#"+currentId).text()));
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a class="menu" id="1"  href="#"> Home </a>
    <a class="menu" id="2"  href="#"> About</a>
    <a class="menu" id="3"  href="#"> Contact</a>

【讨论】：

【解决方案4】：

将点击的元素对象传递给函数：

<a class="menu" onclick="getMenu(this)" href="#"> Home </a>

然后读取它的textContent 或innerHTML 属性：

function getMenu(obj) {
    alert(obj.textContent);
}

您可能还想去除文本周围的空白：

obj.textContent.trim();

查看下面的演示。

function getMenu(obj) {
    alert(obj.textContent.trim());
}

<a class="menu" onclick="getMenu(this)" href="#"> Home </a>
<a class="menu" onclick="getMenu(this)" href="#"> About</a>
<a class="menu" onclick="getMenu(this)" href="#"> Contact</a>

【讨论】：