JavaScriptでボタンをクリックした後に「No More Data」メッセージを表示するには

Question

jacasvriptの助けを借りてボタンをクリックした後、「残念です！表示するデータがありません」を表示したいと思います。画像をクリックします。

私はjavascript関数以下の使用していますが、HTML

<div id="noMoreDiv" style="display:none;" class="answer_list" > Sorry! No more data to display!</div> <button class="col-xs-12 col-sm-6 col-md-4 col-lg-2 Load_More_Button"> LOAD MORE POSTS </button> 

$(document).ready(function(){ 
$(".Load_More_Button").click(function(){ 
     document.getElementById('noMoreDiv').style.display = "block" 

}); 

と関連が動作していない私はこれを達成することができますどのように私にアドバイスをしてくださいしていますターゲット。あなたのdivが空作りとJavaScriptでテキストを設定

$(document).ready(function(){ 
    $(".Load_More_Button").click(function(){ 
     $('#noMoreDiv').show(); // this will make your div visible 
    }); 
}); 

Answer 1

これを試してみてください...

あなたは$(..).hide();と$(..).show();を利用する... jQueryのあるものとします。これはCSS displayの機能を自動化します。

$(document).ready(function() { 
 
    $(".Load_More_Button").click(function() { 
 
    $('#noMoreDiv').show(); 
 
    $('.Load_More_Button').hide(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div id="noMoreDiv" style="display:none;" class="answer_list">Sorry! No more data to display!</div> 
 
<button class="col-xs-12 col-sm-6 col-md-4 col-lg-2 Load_More_Button">LOAD MORE POSTS</button>

Answer 2

はこれを試してみてください。

Answer 3

document.getElementById('noMoreDiv').innerHtml = "Sorry! No more data to display!". 

：

Answer 4

$(document).ready(function() { 
 
    $(".Load_More_Button").click(function() { 
 
    $loadButton = $(this); 
 
    $.getJSON(url, function(data) { 
 
     if (data.content) { 
 
     //append your content 
 
     } 
 
     if (!data.more) { 
 
     $loadButton.hide(); 
 
     $('#noMoreDiv').show(); 
 
     } 
 
    }); 
 

 

 
    }); 
 
});