如果jQuery元素hasClass()更改其他元素链接文本 [英] if jQuery element hasClass() change different element link text
问题描述
我正在使用jQuery函数将类添加/删除到单击的元素中，效果很好.但是，当单击该元素时，我试图更改HTML链接的文本，但似乎无法使其正常工作. HTML链接位于页面下方的<span>元素内.
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.
当<button id="jobs"> hasClass('user_view_active')时，HTML链接应显示人".当<button id="jobs"> hasClass('user_view_active')时，HTML链接应显示人".
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".
<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>
推荐答案
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 -
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
此代码必须包装在click事件的回调函数中才能起作用-
This code would have to be wrapped in the callback function of the click event to work -
$(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类.
Now each time the button is clicked, you can check for the existence of the user_view_active class on the #people element.
这篇关于如果jQuery元素hasClass()更改其他元素链接文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
