Как отобразить сообщение «Нет больше данных» после нажатия кнопки в javascript

Question

Я хочу отобразить «Извините! Нет больше данных для отображения» после нажатия кнопки с помощью jacasvript. Пожалуйста, просмотрите перед нажатием кнопки и после кнопки щелкните изображения.

Я использую следующие функции яваскрипта, но он не работает

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

}); 

и связанной с 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> 

Пожалуйста, советы мне, как я могу добиться этого цель.

Answer 1

Попробуйте это ...

Предположим, вы JQuery ... Используйте $(..).hide(); и $(..).show();. это автоматизирует функцию 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

Попробуйте это:

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

Answer 3

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

Сделайте ДИВ пустым и установить текст с помощью JavaScript.

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

 

 
    }); 
 
});