Кнопка "Загрузить еще" ничего не отображает - PullRequest
Новая
       0

Кнопка "Загрузить еще" ничего не отображает

0 голосов
/ 16 июня 2020

Я пытаюсь отобразить дополнительный контент, но мой код не работает. Кажется, я не нашел ничего неправильного в коде, помощь очень ценится. Спасибо. 

<head>
<style>
  #more { display: none; }
</style>
</head>

<body>
<p>Content</P>
<span id="more">
  <p>Content</p>
</span><span id="more">
<span id="more">
  <p>Content</p>
</span><span id="more">
<span id="more">
  <p>Content</p>
</span><span id="more">
...

<a href="#" id="load">Load More</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>
$(function(){
    $("#more").slice(0, 2).show();
    $("#load").click(function(e){ 
        e.preventDefault();
        $("#more:hidden").slice(0, 2).show(); 
        if($("#more:hidden").length == 0){ 
            alert("No more"); 
        }
    });
});
</script>
</body>
</html>

1 Ответ

4 голосов
/ 16 июня 2020

Подсказки для вашего подхода:

У вас разные ошибки в вашем коде:

  1. у вас их несколько id="more"
  2. вы используете отверстие <span>, но вы не используете закрывающую часть `` ''.

Вот небольшой рабочий пример, похожий на ваш код, но это не лучшее решение вашей проблемы.

Я изменил html id на class, чтобы запросить более одного <span> элемента 

$(function(){
    var nextMore = 0;
    $("#load").click(function(e){ 
        e.preventDefault();
        $(".more").slice(nextMore, nextMore + 1 ).show();
        nextMore += 1;
        if($(".more").length - nextMore == 0){ 
            alert("No more"); 
        }
    });
});
.more { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<p>Content</p>
<span class="more">
  <p>Content</p>
</span>
<span class="more">
  <p>Content</p>
</span>
<span class="more">
  <p>Content</p>
</span>

<a href="#" id="load">Load More</a>

(Более) подходящий подход:

Как упоминалось другими комментаторами, я думаю, вы попытаетесь сделать что-то вроде это : 

$(document).ready(function(){
  $("#btn").click(function(){
    $("ol").append("<li>Content</li>");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<ol>
  <li>Content</li>
</ol>

<button id="btn">Append Content items</button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...