javascript - 如果 jQuery 元素 hasClass() 更改不同的元素链接文本

标签 javascript jquery html

我正在使用 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/

相关文章:

javascript - forms.$valid 显示 true,但打印为 false

javascript - D3.JS 添加标题后丢失条形图文本

javascript - 自动聚焦于联系表 7 的首次输入

html - 带有 li 列表菜单的不需要的左侧空间

javascript - 未知编码 : iso-8859-1 error in Zombie. js

javascript - 使用 JQuery 更改表单操作

javascript - "Twitter for iPhone"的API

Javascript 和 HTML5 循环问题

ios - iOS safari 中视频上的图像叠加

javascript - 监听事件 "close enough"到元素