1

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

当<button id="people">hasClass('user_view_active') 时，HTML 链接应显示“People”，而当<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>
4

3 回答 3

3

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

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

于 2012-07-25T22:09:06.530 回答
1

好吗？

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

<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);
    });
});

小提琴

于 2012-07-25T22:25:37.010 回答
0

试试这个方法：

$('#people').toggleClass('user_view_active').html($('#people').hasClass('user_view_active')?'People':'Jobs');
于 2015-03-17T06:42:36.320 回答