JS 함수는 .text를 사용하여 텍스트를 예상대로 정확히 대체하지 않습니다.

Question

다음 JS/JQ 함수를 사용하여 사용자에게 다음과 다음 질문 사이를 전환 할 수 있습니다. 내 앱의 일부 위치에서 사용자는 링크 텍스트 "Follow"또는 "Unfollow"가있는 링크를 클릭 할 수 있습니다. 다른 곳에서는 "FOLLOW"또는 "UNFOLLOW"라고 표시된 버튼을 클릭 할 수 있습니다. 내 this.text() 테스트는 링크 또는 버튼에서 내 함수를 호출하는지 여부에 따라 소문자 또는 대문자 레이블 만 업데이트 할 것으로 기대하고있었습니다. 그러나 항상 두 가지 테스트를 모두 실행하는 것으로 보입니다. 링크 텍스트 = "따라 가기"링크를 클릭하면 링크 텍스트 = "끝내기"로 끝납니다. 어떤 제안?

$(function() { 
    $(".question_follow_unfollow").click(function (e) { 
     e.preventDefault(); 
     if (IS_AUTHENTICATED == 'false') { 
      window.location = '/login/?next=/'; 
     } else { 
      $.ajax({ 
       type: "POST", 
       url: "/question/follow-unfollow/", 
       data: { 
        'qid': $(this).data('qid') 
       }, 
       success: function (e) { 
        alert('Got it!'); 
       } 
      }); 
      $(this).text($(this).text() == 'Follow' ? 'Unfollow' : 'Follow'); 
      $(this).text($(this).text() == 'FOLLOW' ? 'UNFOLLOW' : 'FOLLOW'); 
     } 
    }); 
}); 

Answer 1

당신이 영역이 있다면, 나는 것 클래스 이것을 스타일로 따라서 이것은 CSS로 설정해야합니다

다음

.uppercase 
{ 
    text-transform:uppercase; 
} 

당신은 간단하게 수행 할 수 있습니다

$(this).text($(this).text() == 'Follow' ? 'Unfollow' : 'Follow'); 

Answer 2

다음이 발생합니다

• 텍스트 Follow 그래서가 변경됩니다되어 다음 다른 라인이 실행
• Unfollow에 :
• Unfollow 그래서 당신이 얻을 동일하지 FOLLOW에있다 UNFOLLOW

너 더 많은 수표가 필요하거나 그것을 변경하십시오. 텍스트가 모두 대문자에

Answer 3

하나 이상의 케이스가 될 수 있고 그 케이스를 유지해야하는 경우에는 3 항 연산자를 사용할 수 없습니다. 가장 쉬운 것은 스위치에게 있습니다

var theText = $(this).text(); 
var replacement = ""; 
switch (theText) { 
    case : "UNFOLLOW" : replacement = "FOLLOW"; break; 
    case : "unfollow" : replacement = "follow"; break; 
    case : "FOLLOW" : replacement = "UNFOLLOW"; break; 
    case : "follow" : replacement = "unfollow"; break; 
} 
$(this).text(replacement); 

Answer 4

무엇에 대해 : 일

var arr = { 
    'Follow': 'Unfollow', 
    'Unfollow': 'Follow', 
    'UNFOLLOW': 'FOLLOW', 
    'FOLLOW': 'UNFOLLOW' 
} 

$(this).text(arr[ $(this).text() ]);