我正在使用 jQuery 函数向单击的元素添加/删除类,效果很好。但是,当单击该元素时,我试图更改 HTML 链接的文本,但我似乎无法使其正常工作。 HTML 链接位于 <span>
内页面下方的元素。
当 <button id="people">
hasClass('user_view_active') 当 <button id="jobs">
时,HTML 链接应该显示“People” hasClass('user_view_active') HTML 链接应显示“工作”。
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('button').each(function(){
$(this).removeClass('user_view_active');
});
$(this).addClass('user_view_active');
});
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").attr("href").text(text.replace('People'));
}else{
$('.title').find("a").attr("href").text(text.replace('Jobs'));
}
});
</script>
</head>
<body>
<div id="container">
<header>
<img src="images/header-name.png" width="200px" style="display: inline; margin-bottom: -10px;"/>
<button id="jobs" class="user_view"><a href="#">Jobs</a></button>
<button id="people" class="user_view_active user_view"><a href="#">People</a></button>
<div class="header_search_wrapper">
<form action="" method="POST">
<textarea class="header_search" name="app_search" placeholder="Search people, jobs, or companies" style="width: 430px;"></textarea>
<input type="submit" class="share_btn" value="Search">
</form>
</div>
</header>
<div id="main" role="main">
<!--! begin app content -->
<div class="right_sidebar">
<span class="right_title">Connection Suggestions</title>
</div>
<span class="title">Recent Updates >> <a href="#">People</a></span>
最佳答案
要替换链接中的文本,您可以使用 jQuery .text()
function .这个函数也可以获取文本值,也可以设置文本值——如下例所示——
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
此代码必须包含在点击事件的回调函数中才能工作 -
$(document).ready(function() {
$('button').click(function(){
$('button').removeClass('user_view_active');
$(this).addClass('user_view_active');
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
});
});
现在每次单击按钮时,您都可以检查 #people
元素上是否存在 user_view_active
类。
关于javascript - 如果 jQuery 元素 hasClass() 更改不同的元素链接文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11659377/