如果jQuery元素hasClass（）更改不同的元素鏈接文本

我正在使用jQuery函數向點擊的元素添加/刪除類，這很好。但是，當單擊該元素時，我試圖更改HTML鏈接的文本，但似乎無法使其工作。 HTML鏈接位於頁面下方的<span>元素內。如果jQuery元素hasClass（）更改不同的元素鏈接文本

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

來源

2012-07-25 Ty Bailey

已經有一個答案，應該幫助你，但也沒有必要'.each'在按鈕集合上移除每個類的類。只要執行'$（'button'）。removeClass（'user_view_active'）;'它會從所有類中移除類。 – MrOBrian 2012-07-25 22:12:23

要替換鏈接中的文本，您可以使用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類。

來源

2012-07-25 22:09:06 Lix

非常感謝你！我正在接近大聲笑 – 2012-07-25 22:23:21

theres一個額外的;這裏我想'$（'。title'）。find（「a」）.text（'Jobs'）;;' – 2016-02-24 09:29:21

@HastigZusammenstellen - 真實的 - 感謝您的反饋！ – Lix 2016-02-24 11:20:57

Okeydokey？

你確定這些是正確的標籤嗎？

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

確定一個<button>元素中的<a>元素是一個好主意？

<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

來源

2012-07-25 22:25:37 adeneo

我有一個JS函數將設置屬性「角色」，以便照顧。你是正確的，在一個按鈕中使用元素不是一個好主意，我將它改爲使用onclick（）進行響應。謝謝你收到。 – 2012-07-25 22:39:45

試試這樣：

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

來源

2015-03-17 06:42:36

如果jQuery元素hasClass（）更改不同的元素鏈接文本

回答

相關問題