0
Was ich habe, ist ein "zufälliger Zitatgenerator". Wie der Name schon sagt, erzeugt es zufällige Anführungszeichen beim Klick auf die Schaltfläche. In meiner so genannten App habe ich einen Button, der das generierte Zitat auf der Facebook-Wand posten soll. Bei meinem Twitter-Button funktioniert das genauso, bei Facebook ist das nicht möglich.Post-Text auf Facebook auf Knopfdruck
<script>
$(document).ready(function(){
\t //alert("hi");
\t $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=40",function(json){
\t \t //alert("hello");
\t \t var colour_arr = ["YellowGreen","Turquoise","Tomato","Teal","SteelBlue","SlateBlue","SeaGreen","SandyBrown","Red","Purple","PaleVioletRed","PaleGreen","Orange","MediumVioletRed","MediumTurquoise","Magenta","LimeGreen","LightSalmon","Khaki","Gold","DodgerBlue","DeepPink","DarkOrange","Crimson","Aquamarine"];
\t \t var colour_num = 0;
\t \t var num = 0;
\t \t var html_quote = "";
\t \t /*json.forEach(function(val){
\t \t \t html += "<h3 id='quote'>" + val.content + "</h3>";
\t \t });*/
\t \t var html_author = "";
\t \t html_quote = "<h3 id='quote' class='colour'><i class='fa fa-quote-left' aria-hidden='true'></i>" + json[num].content + "</h3>";
\t \t html_author = "<h5 id='author' class='colour'> - " + json[num].title + "</h5>";
\t \t $("#quote-column").html(html_quote);
\t \t $("#author-column").html(html_author);
\t \t $(".colour").css("color",colour_arr[colour_num]);
\t \t $(".bg-colour").css("background-color",colour_arr[colour_num]);
\t \t $("#new-quote-btn").on("click",function(){
\t \t \t //alert("hello");
\t \t \t colour_num++;
\t \t \t num++;
\t \t \t //alert(num);
\t \t \t html_quote = "<h3 id='quote' class='colour'><i class='fa fa-quote-left' aria-hidden='true'></i>" + json[num].content + "</h3>";
\t \t \t html_author = "<h5 id='author' class='colour'> - " + json[num].title + "</h5>";
\t \t \t $("#quote-column").html(html_quote);
\t \t \t $("#author-column").html(html_author);
\t \t \t $(".my-btn").css("color","white");
\t \t \t $(".colour").css("color",colour_arr[colour_num]);
\t \t \t $(".bg-colour").css("background-color",colour_arr[colour_num]);
\t \t });
\t \t var randomQuote = json[num].content.replace("<p>","");
\t \t randomQuote = randomQuote.replace("</p>","");
\t \t $("#twitter-btn").on("click",function(){
\t \t \t //alert(json[num].content);
\t \t \t //var randomQuote = json[num].content.replace("<p>","");
\t \t \t //randomQuote = randomQuote.replace("</p>","");
\t \t \t //alert(randomQuote);
\t \t \t window.open("https://twitter.com/intent/tweet?text=" + randomQuote,"_blank");
\t \t \t //location.href = "https://twitter.com/intent/tweet?text=" + json[num].content;
\t \t \t //$(this).attr("href","https://twitter.com/intent/tweet?text=" + json[num].content);
\t \t });
\t \t $("#fb-btn").on("click",function(){
\t \t \t window.open("https://www.facebook.com/sharer/sharer.php?u=https://codepen.io/iamrkcheers/pen/gRjoeZ","_blank");
\t \t });
\t });
});
</script>.box {
\t background-color : white;
\t border-radius : 5px;
}
.my-btn {
\t color : white;
}
#twitter-btn, #fb-btn {
\t width : 40px;
}<html>
<body class="bg-colour">
\t <div class="container-fluid">
\t \t <div class="row" id="main-row">
\t \t \t <div class="col-md-12 col-sm-12 col-xs-12" id="main-column">
\t \t \t \t <br>
\t \t \t \t <br>
\t \t \t \t <br>
\t \t \t \t <br>
\t \t \t \t <br>
\t \t \t \t <br>
\t \t \t \t <div class="row" id="row-containing-block">
\t \t \t \t \t <div class="col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6 col-xs-offset-1 col-xs-10 box" id="column-containing-block">
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <div class="row" id="quote-row">
\t \t \t \t \t \t \t <div class="col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-offset-1 col-xs-10" id="quote-column">
\t \t \t \t \t \t \t \t <!-- <h3 id="quote"></h3> -->
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="row" id="author-row">
\t \t \t \t \t \t \t <div class="col-md-offset-7 col-md-4 col-sm-offset-5 col-sm-6 col-xs-offset-3 col-xs-8" id="author-column">
\t \t \t \t \t \t \t \t <!-- <h5 id="author"></h5> -->
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <div class="row" id="btn-row">
\t \t \t \t \t \t \t <div class="col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-offset-1 col-xs-10" id="btn-column">
\t \t \t \t \t \t \t \t <button type="button" class="btn btn-default my-btn bg-colour" id="twitter-btn"><i class="fa fa-twitter" aria-hidden="true"></i></button>
\t \t \t \t \t \t \t \t <button type="button" class="btn btn-default my-btn bg-colour" id="fb-btn"><i class="fa fa-facebook" aria-hidden="true"></i></button>
\t \t \t \t \t \t \t \t <button type="button" class="btn btn-default my-btn bg-colour pull-right" id="new-quote-btn">New Quote</button>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <br>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <br>
\t \t \t \t <br>
\t \t \t \t <br>
\t \t \t \t <br>
\t \t \t \t <br>
\t \t \t \t <br>
\t \t \t </div>
\t \t </div>
\t </div>
</body>
</html>Nach meinem Arbeitsbeispiel ist ..
https://codepen.io/iamrkcheers/pen/gRjoeZ
Statt der "etwas sagen .." Text möchte ich meine 'zufälliges Zitat'. Egal, um das zu tun?!? Anyhelp wird geschätzt. Danke.
ich auf eine Antwort in JavaScript suchen! – iamrkcheers