AuthorButton에 대한 내 .on ("클릭") 함수가 다른 모든 모든 인용문에 대해서만 변수를 반환하는 이유는 무엇입니까?

Question

일부 배경 : FreeCodeCamps 프론트 엔드 개발 프로젝트를 진행 중이며이 프로젝트는 랜덤 견적 기계를 나타냅니다.

나는 각각의 견적 숨겨진 저자을 유지하지만, 그 순간에, 버튼은 저자마다 다른 견적을 보여준다 "표시하려면 클릭합니다"하고 싶은

...

https://codepen.io/DecisiveIndecisive/pen/KXjXXd

코드에 질문은 자바 스크립트입니다. 고맙습니다!

$(document).ready(function() { 
    var url = 
    "https://api.forismatic.com/api/1.0/?method=getQuote&key=1&lang=en&format=jsonp&jsonp=?"; 

    $("#refreshButton").on("click", function() { 
    $.getJSON(url, function(json) { 
     var jsonQuote = json.quoteText; 
     var jsonAuthor = json.quoteAuthor; 
     $(".counter").html(jsonAuthor); 
     $("#authorButton").text("Click to Reveal"); 

     if (jsonAuthor === "") { 
     $("#refreshButton").trigger("click"); 
     } else { 
     $(".message").html(jsonQuote); 
     $("#authorButton").click(function() { 
      $(this).text(function(i, text) { 
      return text === "Click to Reveal" 
      ? "- " + jsonAuthor 
       : "Click to Reveal"; 
      }); 
     }); 
     } //else close 
    }); //getJSON close 
    }); //refreshButton Close 
}); 

Answer 1

여기에서 문제는 새로 고침 버튼을 클릭 할 때마다 클릭 기능을 다시 바인딩한다는 것입니다. 즉, 두 번째 따옴표를 클릭하면 같은 유효 함수가 두 번 호출됩니다. #authorButton 클릭 핸들러 내부에 로그 메시지를 추가하면이를 실제로 볼 수 있습니다.

$("#authorButton").click(function() { 
    $(this).text(function(i, text) { 
    console.log(text) 
    return text === "Click to Reveal" ? "- " + jsonAuthor : "Click to Reveal"; 
    }); 
}); 

더 나은 옵션을 사용하면 JSON 피드를 얻을 때 jsonAuthor으로 업데이트 할 수 있습니다 숨겨진 요소가하는 것입니다. 그런 다음 호출 될 때 숨겨진 요소를 보여주는 단일 처리기 #authorButton을 클릭하십시오.

Answer 2

새 견적을로드 할 때마다 새 클릭 수신기가 추가됩니다. 그런 다음 text === "Click to Reveal"을 체크하면 리스너가 x 번 호출되고 매번 텍스트가 업데이트됩니다.