Question

在这个HTML文件中，Twig显示了我在数据库中的所有字段。我是什么试图用jQuery做的只是显示前两个字段数据库和按钮show more，显示更多2个字段，但我是一个初学者在jQuery中我需要一些帮助。任何提示都会很棒。

<div id="processador" class="expandContent">
   <h3 class="header">
      <div class="headerColumn1">Processador</div>
      <div class="headerColumn2 expand"><img src="img/plus.png"/></div>
      <div class="expandedContentClearFloat"></div>
   </h3>
   <div class="expandedContent" id="123">
      {% for item in processador %}
      <div class="product-removal" id="aas">
         <article class="product">
            <header>
               <img src="{{ item.img|e }}">
            </header>
            <div class="content">
               <button name="proc" id="{{ item.id|e }}" type="button"
                  class="close close-processador pull-right" aria-label="Close"
                  data-id="{{ item.id|e }}" data-preco="{{ item.preco_unit|e }}">
               <span aria-hidden="true">&times;</span>
               </button>
               <h1>{{ item.marca|e }}</h1>
               {{ item.descr|e }}
            </div>
            <footer class="content">
               <h2 class="full-price fixed fixed-processador">
                  {{ item.preco_unit|e }}€
               </h2>
               <a data-versao="{{item.versao|e}}" class="adicionar adicionar-processador pull-right full-price"
                  data-modelo="{{ item.modelo|e }}" data-id="{{ item.id|e }}"
                  data-preco="{{ item.preco_unit|e }}">
                  <h2 class="full-price">
                     {{ item.preco_unit|e }}€
                  </h2>
               </a>
               <h2 class="price">
                  {{ item.preco_unit|e }}
               </h2>
            </footer>
         </article>
      </div>
      {% endfor %}
      <button id="showmore" text-center>Show More</button>
   </div>
</div>

我看到了这段代码，但因为我是初学者，所以我不能纳入我的代码

$(function () {
    $("div").slice(0, 2).show();
    $("#showmore").on('click', function (e) {
        e.preventDefault();
        $("div:hidden").slice(0, 2).slideDown();
        if ($("div:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});

Answer 1

您可以通过以下步骤实现此目的：

在页面上使用limit和offset从Db中获取前两行。
在隐藏字段中存储偏移量。例如：抵消0.
当用户点击show more获取隐藏偏移值的值时，使用向服务器发送Ajax请求以及偏移值，在偏移值中添加2。
在服务器端使用限制2和偏移量使用从url.Fetch中获取的偏移数来自DB的另外两行。
使用json_encode返回数据，并在客户端使用$.parseJSON(data)
使用新数据将HTML附加到您的div。用新值更新offset的隐藏值。

希望这有帮助。

Answer 2

最好的方法是主要使用CSS和简单的点击事件处理程序（请参阅下面的代码段）使用twig loop.index在要隐藏/显示的元素上添加额外的类。

<div class="product-removal{%if loop.index > 1 %} additional{%endif%}">

$('#showmore').on('click', function(e){
    this.classList.toggle('show');
});

#showmore{cursor: pointer; display:inline-block;margin:10px 0;}
.additional{display: none}
.show ~ .additional{display: block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-removal" id="aas">
   <article class="product">
   LOREM IPSUM
   </article>
</div>
<div class="product-removal" id="yyy">
   <article class="product">
   LOREM IPSUM
   </article>
</div>
<span id="showmore">Show more</span>
<div class="product-removal additional" id="yyy">
   <article class="product">
   ADDITIONAL LOREM IPSUM …
   </article>
</div>

如果要隐藏大量元素，请考虑使用JavaScript和AJAX检索其他条目。并将additional类添加到上面添加的新项目中。

尝试使用jQuery显示来自数据库div的字段

2 个答案: