Dlaczego moja funkcja .on ("click") dla funkcji AuthorButton zwraca moją zmienną tylko co drugi cytat?

Question

Niektóre informacje: Pracuję nad projektami Front-End Development w FreeCodeCamps, a ten projekt przedstawia maszynę z losową wyceną.

chciałbym zachować autor ukryty za każdy cytat, ale w tej chwili, „Kliknij aby odsłonić przycisk” ujawnia tylko autorowi każdy inny cytat ...

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

Kod w pytanie to JavaScript. Dziękuję Ci!

$(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

Problem polega na tym, że ponownie wiążesz funkcję kliknięcia za każdym razem, gdy klikniesz przycisk odświeżania. Oznacza to, że po kliknięciu drugiego cytatu ta sama efektywna funkcja jest wywoływana dwukrotnie. Możesz zobaczyć to w akcji, jeśli dodasz komunikat dziennika do swojej obsługi kliknięcia #authorButton.

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

Lepszym rozwiązaniem byłoby mieć ukryty element, który można aktualizować z jsonAuthor kiedy dostaniesz swój kanał JSON. Następnie należy mieć jedną obsługę kliknięcia #authorButton, która po przywołaniu pokazuje ukryty element.

Answer 2

Za każdym razem, gdy ładujesz nowy cytat, dodajesz nowy detektor kliknięcia. Następnie, po sprawdzeniu text === "Click to Reveal", detektor jest wywoływany x razy i tekst jest aktualizowany za każdym razem.