单击 Javascript 中的按钮后如何显示 "No More Data" 消息

Question

我想在 JavaScript 的帮助下单击按钮后显示“抱歉！没有更多数据可显示”。请查看按钮点击前和按钮点击后的图像。

我正在使用以下 Javascript 函数，但它不起作用：

$(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

试试这个：

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

Answer 2

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

将您的 div 设为空，然后按 javascript 设置文本。

Answer 3

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


  });
});

Answer 4

试试这个...

假设您是 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>

单击 Javascript 中的按钮后如何显示 "No More Data" 消息

How to Display "No More Data" message after Button click in Javascript

javascript

jquery

buttonclick

jquery-events