if jQuery element hasClass() change different element link text

Question

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.

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>

There is already an answer that should help you, but also there is no need to .each over the collection of buttons to remove the class from each one. Just do $('button').removeClass('user_view_active'); and it will remove the class from all of them. — MrOBrian
– MrOBrian, Commented Jul 25, 2012 at 22:12

Lix · Accepted Answer · 2016-02-24 11:21:22Z

4

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

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

Now each time the button is clicked, you can check for the existence of the user_view_active class on the #people element.

edited Feb 24, 2016 at 11:21

answered Jul 25, 2012 at 22:09

Lix

48.2k12 gold badges107 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hastig Zusammenstellen Over a year ago

theres an extra ; here i think $('.title').find("a").text('Jobs');;

Lix Over a year ago

@HastigZusammenstellen - true true - thanks for the feedback!

adeneo · Accepted Answer · 2012-07-25 22:25:37Z

1

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?

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

role="main" is'nt a valid attribute, but will probably work anyway.

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

FIDDLE

answered Jul 25, 2012 at 22:25

adeneo

319k29 gold badges410 silver badges392 bronze badges

1 Comment

Ty Bailey Over a year ago

I have a JS function that will set set the attribute "role" so that is taken care of. And you are correct, using an <a> element in a button is not a good idea, I changed it to respond with onclick(). Thank you for catching that.

Ahosan Karim Asik · Accepted Answer · 2015-03-17 07:09:34Z

0

Try this way:

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

edited Mar 17, 2015 at 7:09

Ahosan Karim Asik

3,3191 gold badge22 silver badges27 bronze badges

answered Mar 17, 2015 at 6:42

awais khan

1

Collectives™ on Stack Overflow

if jQuery element hasClass() change different element link text

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related