लेखक के लिए मेरा .on ("क्लिक") फ़ंक्शन क्यों है बटन केवल मेरे चर को हर दूसरे उद्धरण को वापस कर रहा है?

Question

कुछ पृष्ठभूमि: मैं फ्रीकोड कैंप फ्रंट-एंड डेवलपमेंट प्रोजेक्ट्स के माध्यम से काम कर रहा हूं और यह प्रोजेक्ट एक यादृच्छिक भाव मशीन का प्रतिनिधित्व करता है।

मैं लेखक प्रत्येक बोली के लिए छिपा रखने के लिए, लेकिन इस समय, बटन केवल एक लेखक हर दूसरे उद्धरण पता चलता है "पता चलता है के लिए क्लिक करें" चाहते हैं ...

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"; 
    }); 
}); 

एक बेहतर विकल्प एक छिपा तत्व है जो आप jsonAuthor साथ अद्यतन कर सकते हैं जब आप अपने json फ़ीड प्राप्त करने के लिए किया जाएगा। फिर एक #authorButton क्लिक हैंडलर क्लिक करें जो दिखाता है कि छुपा तत्व जब लागू होता है।

Answer 2

हर बार जब आप एक नया उद्धरण लोड कर रहे होते हैं, तो आप एक नया क्लिक श्रोता जोड़ रहे हैं। फिर, जब आप text === "Click to Reveal" चेक करते हैं, श्रोता को x बार कहा जाता है और टेक्स्ट हर बार अपडेट किया जाता है।