Question

我正在使用jQuery函数向被点击的元素添加/删除一个类，这很好用。但是，当单击该元素时，我正在尝试更改HTML链接的文本，而我似乎无法使其正常工作。 HTML链接位于页面下方的<span>元素内。

当<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>

Answer 1

要替换链接中的文字，您可以使用jQuery .text() function。此函数还可以获取文本值并设置文本值 - 如下例所示 -

if ($('#people').hasClass('user_view_active')){
  $('.title').find("a").text('People'); 
}else{
  $('.title').find("a").text('Jobs'); 
}

此代码必须包含在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');
    }
  });
});

现在，每次单击该按钮，您都可以检查user_view_active元素上是否存在#people类。

Answer 2

Okeydokey？

你确定那些是正确的标签吗？

<span class="right_title">Connection Suggestions</title>

您确定<a>元素中的<button>元素是个好主意吗？

<button id="jobs" class="user_view"><a href="#">Jobs</a></button>

role="main"不是一个有效的属性，但无论如何都可能有效。

这似乎更容易：

$(document).ready(function() {
    $('button').on('click', function(){
        $('button').removeClass('user_view_active');; 
        $(this).addClass('user_view_active');
        $("a", ".title").text(this.id);
    });
});

FIDDLE

Answer 3

尝试这种方式：

$('#people').toggleClass('user_view_active').html($('#people').hasClass('user_view_active')?'People':'Jobs');

如果jQuery元素hasClass（）改变不同的元素链接文本

3 个答案: