jQuery를가 추가 삭제 텍스트

Question

나는 기본 상태에 블랙 색상에있는 같은 기능을 가지고 있고, 사용자가 같은 버튼을 클릭 할 때마다이 파란색으로 변과 "좋아 하냐"텍스트가 같은 아이콘

외에 나타납니다 작동 중입니다. 좋아요를 클릭하면 파란색으로 바뀌고 다시 클릭하면 검은 색으로 바뀝니다. 문제는 내가 append 함수를 사용할 때 발생합니다. "LikedLiked"가 표시되고, 1 번 '좋아요'로만 표시되고 다시 버튼을 클릭 할 때마다 like 아이콘을 포함한 모든 요소가 제거됩니다. 난 그냥 텍스트를 제거하는 것입니다하려는 경우에만.

는

여기 내 코드의

<div class="extra content"> 
    <a class="likeicon"> 
    <i class="fa fa-thumbs-o-up" aria-hidden="true" ></i> 
    </a> 

내 jQuery를

$(".likeicon").click(function(){ 
if($(this).css("color") === "rgb(0, 0, 255)"){ 
    $(this).css("color", "black"); 
    $(this).empty(); 
} else { 
    $(this).css("color", "blue"); 
    $(this).append("Liked") 
} 
}); 

내가 유래 여기에 확인했습니다, 난) (.empty 사용하여 시도 및 .remove().하지만 모두 내 텍스트 및 내 같은 아이콘을 제거합니다/

고마워요!

Answer 1

당신은 css으로, 다음과 같이 수행 할 수 있습니다

$(".likeicon").click(function(){ 
 
\t $(this).toggleClass('active'); 
 
});

.likeicon.active i{ 
 
    color: blue; 
 
} 
 
.likeicon{ 
 
    cursor: pointer; 
 
} 
 
.likeicon span{ 
 
    display: none; 
 
    color: blue; 
 
} 
 
.likeicon.active span{ 
 
    display: inline; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="extra content"> 
 
    <a class="likeicon"> 
 
    <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 
 
    <span>Liked</span> 
 
    </a>

Answer 2

당신은 ID

$(this).append('<span id="liked_txt">Liked</span>'); 

와 elemrnt에 텍스트를 추가하고 제거 할 때이

를 사용

$("#liked_txt").remove(); 

Answer 3

추가 CSS를 사용하면이 작업을 수행 할 수 있습니다. 를 사용해보십시오 : 의사 요소 뒤에 :

는

.likeicon { 
    color: black; 
} 

.like:after { 
    content: "liked"; 
    color: blue; 
} 

그럼 그냥 클릭 처리기 내에서 추가 앵커 태그에 '와 같은'클래스를 제거하기 위해 jQuery를 사용합니다.

$('.likeicon').click(function(e) { 
    e.defaultPrevented; 
    if ($(this).hasClass('like')) { 
     $(this).removeClass('like'); 
    } 
    else { 
     $(this).addClass('like'); 
    } 
});