Question

23

if jQuery element hasClass() change different element link text

rated 0 times [ 30] [ 7] / answers: 1 / hits: 15833 / 12 Years ago, wed, july 25, 2012, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

scarlett

Add To Favorites

Follow

Total Points: 491

Total Questions: 94

Total Answers: 100

Location: New Caledonia

Member since Thu, Mar 23, 2023

1 Year ago

scarlett questions

1 Property 'userAgentData' does not exist on type 'Navigator'

Tue, Mar 8, 22, 00:00, 2 Years ago

1 JS How to get discord account data via oauth2

Tue, Aug 17, 21, 00:00, 3 Years ago

1 Mongoose/NestJs can't access createdAt even though {timestamps: true}

Wed, Jun 2, 21, 00:00, 3 Years ago

1 SASL error in postgres connection with node.js

Sat, May 1, 21, 00:00, 3 Years ago

1 How to get data-attribute in React?

Wed, Jun 17, 20, 00:00, 4 Years ago

View All

answered 12 Years ago rociom · Accepted Answer

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.