按下javascript

Question

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

我正在使用以下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>