jQuery：在保留子元素的同時在點擊時更改文本和類

我試圖用jQuery做一個簡單的「切換」功能，但我似乎無法讓它工作得很正確。jQuery：在保留子元素的同時在點擊時更改文本和類

我有一個HTML塊，看起來像這樣：

<li class="item-actions-follow"> 
    <a href="#" id="follow" class="icon small-icon circle_plus"> 
     <i></i> 
      Follow 
    </a> 
</li>

我想，當用戶點擊鏈接「按照」更改類circle_plus在一個href標籤circle_minus並更改文字按照到取消關注，反之亦然。

我嘗試了一些不同的東西，但他們都接近，但不完全是我想要的。

在一個jQuery事件「點擊」我這樣做：

var text = $("a#follow").text() == 'Follow' ? 'Unfollow' : 'Follow'; 
$("a#follow").text(text);

這確實改變了文本「跟隨」到「取消關注」，但不能回來時，我再次點擊該鏈接和它去掉了標籤這實質上是顯示由circle_plus類提供的圖標。

我也試圖做一個純粹的切換（我後來發現的切換功能不上的文字，但只有性工作），像這樣：

$("a#follow").toggle 
function() { 
$("a#follow").text("Unfollow"); 
$(this).removeClass('circle_plus').addClass('circle_minus').stop(); 
     }, 
     function() { 
     $("a#follow").text("Follow"); 
     $(this).removeClass('circle_minus').addClass('circle_plus').stop(); 
     });

當我做到這一點，點擊鏈接，它只是一起「淡化」文本和圖標，甚至不會改變課程。

我也嘗試了.toggleClass()函數，但沒有運氣。

我對jQuery比較新，所以它可能是一個簡單的任務，但我已經找到了一個解決方案，但迄今沒有運氣的廣泛。

希望你能幫助我指出正確的方向。

來源

2013-05-22 Mestika

你能提供一個可行的例子嗎？ –

裹的跨度內的文本：<a id="follow">follow</a>

我會做它的老校友方式：

$('#follow').click(function() { 
    if ($(this).hasClass('circle_plus')) { 
     $(this).removeClass('circle_plus').addClass('circle_minus').find('span').text('unfollow'); 
    } 
    else { 
     // vice versa 
    } 
});

來源

2013-05-22 07:55:41 Alex

因爲你沒有包裹另一個元素中的元素，在它裏面內容爲空。

只需添加.trim()刪除空的空間..

這應該是很好的

$('#follow').on('click', function() { 
    var $elem = $("#follow"); 
    $elem.text().trim() === 'Follow' ? $elem.text('UnFollow') 
            : $elem.text('Follow'); 
    $elem.toggleClass('circle_plus circle_minus') 
});

Check Fiddle

來源

2013-05-22 08:01:20

-1

或者，你可以做這樣的事情，你降低js「開銷「（儘管很少）。正如你所看到的，我已經改變了標記。

HTML：

<li class="item-actions-follow"> <a href="#" id="follow" class="icon small-icon"> 
     <span class="circle_plus"> 
      <i></i> 
      Follow 
     </span> 
     <span class="circle_minus"> 
      <i></i> 
      UnFollow 
     </span> 
    </a>  
</li>

JS/jQuery的

$("a#follow").click(function(){ 
    $(this).children("span").toggle(); 
});

Test Link

來源

2013-05-22 08:06:32

什麼？爲什麼要投這個？ –

你在點擊功能處理器包裝呢？看看這個小提琴其工作

http://jsfiddle.net/qq8f3/5/

HTML

<a href="#" id="follow">Follow</a>

CSS

#follow.circle_plus{background-color:red;}

$("a#follow").click(function(){ 
var link = $("a#follow"); 
var text = link.text() == 'Follow' ? 'Unfollow' : 'Follow'; 
link.text(text); 
link.toggleClass('circle_plus'); 
return false;});

來源

2013-05-22 08:11:24 yaswanth89

jQuery：在保留子元素的同時在點擊時更改文本和類

回答

相關問題