jQuery .click（）を複数回アクティブにする

Question

私はクリックしたときにランダムな引用符を表示し、その著者が私の配列に見つかった引用符マシンで作業しています。ランダム引用符を一度表示するようにすることはできますが、もう一度ボタンをクリックしても何もしません。

HTML

<div class="quote-box"> 
    <h1>Random Quote Generator</h1> 
    <p class="quotes">This is where the quotes go.</p> 
    <span class="quote-authors">Quote author</span> 

    <div class="social-media"> 
    <a href="#"><i class="fa fa-twitter"></i></a> 
    <a href="#"><i class="fa fa-tumblr"></i></a> 
    </div> 

    <button class="quote-button">New Quote</button> 
</div> 

Javascriptを

//VARIABLES 
/////////////// 
var quotes = [["Quote 1", "Author 1"], ["Quote 2", "Author 2"], ["Quote 3", "Author 3"], ["Quote 4", "Author 4"]]; 

var randomQuote = quotes[Math.floor(Math.random() * quotes.length)]; 


//FUNCTIONS 
/////////////// 
function quoteGeneration() { 
    $(".quotes").replaceWith(randomQuote); 
}; 


//QUOTE BUTTON 
///////////////// 
$(".quote-button").click(function() { 
    quoteGeneration(); 
}); 

Answer 1

二つの主要な問題があります。 1つは、最初のクリックで.quotes要素をDOMから削除するためです。 replaceWith()の代わりにtext()を使用してください：

$(".quotes").text(randomQuote); 

第二は、あなただけのページのロード時にランダムに一度見積もりを選ぶと、あなたのロジックは欠陥があるということです。これはクリックハンドラ内で行う必要があります。これを試してみてください：

var quotes = [ 
 
    ["Quote 1", "Author 1"], 
 
    ["Quote 2", "Author 2"], 
 
    ["Quote 3", "Author 3"], 
 
    ["Quote 4", "Author 4"] 
 
]; 
 

 
$(".quote-button").click(function() { 
 
    var randomQuote = quotes[Math.floor(Math.random() * quotes.length)]; 
 
    $(".quotes").text(randomQuote); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="quote-box"> 
 
    <h1>Random Quote Generator</h1> 
 
    <p class="quotes">This is where the quotes go.</p> 
 
    <span class="quote-authors">Quote author</span> 
 

 
    <div class="social-media"> 
 
    <a href="#"><i class="fa fa-twitter"></i></a> 
 
    <a href="#"><i class="fa fa-tumblr"></i></a> 
 
    </div> 
 

 
    <button class="quote-button">New Quote</button> 
 
</div>

Answer 2

あなたの問題は、クリックとは何の関係もありません。あなたの問題は乱数を一度生成し、一度引用符を読むことです。

メソッド内で乱数/引用符の選択を移動します。また、内部のテキストではなく要素を置き換えます。

//VARIABLES 
 
/////////////// 
 
var quotes = [["Quote 1", "Author 1"], ["Quote 2", "Author 2"], ["Quote 3", "Author 3"], ["Quote 4", "Author 4"]]; 
 

 

 

 
//FUNCTIONS 
 
/////////////// 
 
function quoteGeneration() { 
 
    var randomQuote = quotes[Math.floor(Math.random() * quotes.length)]; 
 
    $(".quotes").text(randomQuote); 
 
}; 
 

 

 
//QUOTE BUTTON 
 
///////////////// 
 
$(".quote-button").click(function() { 
 
    quoteGeneration(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="quote-box"> 
 
    <h1>Random Quote Generator</h1> 
 
    <p class="quotes">This is where the quotes go.</p> 
 
    <span class="quote-authors">Quote author</span> 
 

 
    <div class="social-media"> 
 
    <a href="#"><i class="fa fa-twitter"></i></a> 
 
    <a href="#"><i class="fa fa-tumblr"></i></a> 
 
    </div> 
 

 
    <button class="quote-button">New Quote</button> 
 
</div>

Answer 3

それが毎回クリックイベントは現在 randomQuoteの通りと呼ばれるランダムな引用が故にinital負荷に一つだけの時間が設定されている取得するように、関数内で、あなたの変数 randomQuoteを移動

値はchnageをdoesnotとhtml代わりにreplaceWith()

//VARIABLES 
 
/////////////// 
 
var quotes = [["Quote 1", "Author 1"], ["Quote 2", "Author 2"], ["Quote 3", "Author 3"], ["Quote 4", "Author 4"]]; 
 

 
//FUNCTIONS 
 
/////////////// 
 
function quoteGeneration() { 
 
    var randomQuote = quotes[Math.floor(Math.random() * quotes.length)]; 
 
    $(".quotes").html(randomQuote); 
 
}; 
 

 
//QUOTE BUTTON 
 
///////////////// 
 
$(".quote-button").click(function() { 
 
    quoteGeneration(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="quote-box"> 
 
    <h1>Random Quote Generator</h1> 
 
    <p class="quotes">This is where the quotes go.</p> 
 
    <span class="quote-authors">Quote author</span> 
 

 
    <div class="social-media"> 
 
    <a href="#"><i class="fa fa-twitter"></i></a> 
 
    <a href="#"><i class="fa fa-tumblr"></i></a> 
 
    </div> 
 

 
    <button class="quote-button">New Quote</button> 
 
</div>

を使用します3210