javascript 如果 jQuery 元素 hasClass() 更改不同的元素链接文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11659377/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
if jQuery element hasClass() change different element link text
提问by Ty Bailey
I am using a jQuery function to add/remove a class to the clicked element, which works just fine. However when that element is clicked, I am trying to change the text of an HTML link and I cannot seem to get it working. The HTML link is located within the <span>element further down the page.
我正在使用 jQuery 函数向单击的元素添加/删除一个类，效果很好。但是，当单击该元素时，我试图更改 HTML 链接的文本，但似乎无法使其正常工作。HTML 链接位于<span>页面下方的元素内。
When <button id="people">hasClass('user_view_active') the HTML link should display "People" when <button id="jobs">hasClass('user_view_active') the HTML link should display "Jobs".
当<button id="people">hasClass('user_view_active') 时，HTML 链接应显示“人”，而<button id="jobs">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>
回答by Lix
To replace the text within a link you can use the jQuery .text()function. This function can also get the text value and also set the text value - as is shown in the example below -
要替换链接中的文本，您可以使用jQuery.text()函数。此函数还可以获取文本值并设置文本值 - 如下例所示 -
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
This code would have to be wrapped in the callback function of the click event to work -
此代码必须包含在 click 事件的回调函数中才能工作 -
$(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');
}
});
});
Now each time the button is clicked, you can check for the existence of the user_view_activeclass on the #peopleelement.
现在，每次单击按钮时，您都可以检查元素user_view_active上是否存在该类#people。
回答by adeneo
Okeydokey ?
Okeydokey ？
Are you sure those are the right tags ?
你确定这些是正确的标签吗？
<span class="right_title">Connection Suggestions</title>
Are you sure an <a>element inside a <button>element is a good idea?
您确定<a>元素内的<button>元素是个好主意吗？
<button id="jobs" class="user_view"><a href="#">Jobs</a></button>
role="main"is'nt a valid attribute, but will probably work anyway.
role="main"不是一个有效的属性，但无论如何可能会起作用。
This just seems easier:
这似乎更容易：
$(document).ready(function() {
$('button').on('click', function(){
$('button').removeClass('user_view_active');;
$(this).addClass('user_view_active');
$("a", ".title").text(this.id);
});
});
回答by awais khan
Try this way:
试试这个方法：
$('#people').toggleClass('user_view_active').html($('#people').hasClass('user_view_active')?'People':'Jobs');
