загрузить больше javascript not working

У меня есть несколько категорий на моей странице и scrollnav js. В моем html у меня есть hidden дополнительные опции и попытка их отображения через javascript.загрузить больше javascript not working

Он увидел этот в codepen http://codepen.io/elmahdim/pen/sGkvH?editors=0010

он работает в codepen, но не в моем проекте. это мой HTML

<div class="col-md-3 col-xs-0 side-nav"> 
</div> 
<div class="col-md-9 col-xs-12"> 
    <div class="main container"> 
     <article class="post__article"> 
      <section class="feature-section row-fluid" id="templates"> 
       <h2 class="main-feature-heading" id="scrollNav-1">loren ipsum</h2> 
       <div class="feature text-center "> 
        <img src="../img/features_screenshots/import.png" class="feature-screenshot"> 
        <h3 class="feature-heading"> 
             loren ipsum 
            </h3> 
        <p> 
         loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum 
        </p> 
       </div> 
       <div class="feature text-center "> 
        <img src="../img/features_screenshots/filters3.PNG" class="feature-screenshot"> 
        <h3 class="feature-heading"> 
             loren ipsum 
            </h3> 
        <p> 
         loren ipsumloren ipsumloren ipsumloren ipsum 
        </p> 
       </div> 
       <div class="feature text-center "> 
        <img src="../img/features_screenshots/groups.png" class="feature-screenshot"> 
        <h3 class="feature-heading"> 
             loren ipsum 
            </h3> 
        <p> 
         loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum 
        </p> 
       </div> 
       <div class="feature hide text-center "> 
        <img src="../img/features_screenshots/teams.png" class="feature-screenshot"> 
        <h3 class="feature-heading"> 
             loren ipsum 
            </h3> 
        <p> 
         loren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsum 
        </p> 
       </div> 
       <div class="feature hide text-center "> 
        <img src="../img/features_screenshots/campaign.png" class="feature-screenshot"> 
        <h3 class="feature-heading"> 
             loren ipsum 
            </h3> 
        <p> 
         loren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsum 
        </p> 
       </div> 
       <div class="feature hide text-center "> 
        <img src="../img/features_screenshots/permission.png" class="feature-screenshot"> 
        <h3 class="feature-heading"> 
             loren ipsum 
            </h3> 
        <p> 
         loren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsum 
        </p> 
       </div> 
       <div class="clearfix"></div> 
       <a href="#" id="loadMore"><i class="fa fa-3x fa-angle-down"></i></a> 
      </section> 
      <section class="feature-section row-fluid" id="manuals"> 
       <h2 class="main-feature-heading" id="scrollNav-2">loren ipsum</h2> 
       <div class="feature text-center "> 
        <img src="../img/features_screenshots/iphone-android.png" class="feature-screenshot"> 
        <h3 class="feature-heading"> 
            loren ipsum 
           </h3> 
        <p> 
         loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum 
        </p> 
       </div> 
       <div class="feature text-center "> 
        <img src="../img/features_screenshots/android-sync.png" class="feature-screenshot"> 
        <h3 class="feature-heading"> 
            loren ipsum 
           </h3> 
        <p> 
         loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum 
        </p> 
       </div> 
       <div class="feature text-center "> 
        <img src="../img/features_screenshots/android-groups.png" class="feature-screenshot"> 
        <h3 class="feature-heading"> 
            loren ipsum 
           </h3> 
        <p> 
         loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum 
        </p> 
       </div> 
       <div class="feature hide text-center "> 
        <img src="../img/features_screenshots/iphone-map.png" class="feature-screenshot"> 
        <h3 class="feature-heading"> 
            loren ipsum 
           </h3> 
        <p> 
         loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum 
        </p> 
       </div> 
       <div class="feature hide text-center "> 
        <img src="../img/features_screenshots/iphone-custom-fields.png" class="feature-screenshot"> 
        <h3 class="feature-heading"> 
            loren ipsum 
           </h3> 
        <p> 
         loren ipsumloren ipsumloren ipsumloren ipsum 
        </p> 
       </div> 
       <div class="feature hide text-center "> 
        <img src="../img/features_screenshots/iphone-canvass.png" class="feature-screenshot"> 
        <h3 class="feature-heading"> 
            loren ipsum 
           </h3> 
        <p> 
         loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum 
        </p> 
       </div> 
       <div class="clearfix"></div> 
      </section> 
      <a href="#" id="loadMore"><i class="fa fa-3x fa-angle-down"></i></a> 
      <section class="feature-section row-fluid" id="advertise"> 
       <h2 class="main-feature-heading" id="scrollNav-3">loren ipsum</h2> 
       <div class="feature text-center "> 
        <img src="../img/features_screenshots/results.png" class="feature-screenshot"> 
        <h3 class="feature-heading"> 
            loren ipsum 
           </h3> 
        <p> 
         loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum 
        </p> 
       </div> 
       <div class="feature text-center "> 
        <img src="../img/features_screenshots/map-analytics.png" class="feature-screenshot"> 
        <h3 class="feature-heading"> 
            loren ipsum 
           </h3> 
        <p> 
         loren ipsumloren ipsumloren ipsumloren ipsum 
        </p> 
       </div> 
       <div class="feature text-center "> 
        <img src="../img/features_screenshots/customfield-analytics.png" class="feature-screenshot"> 
        <h3 class="feature-heading"> 
            loren ipsum 
           </h3> 
        <p> 
         loren ipsumloren ipsumloren ipsumloren ipsum 
        </p> 
       </div> 
       <div class="feature hide text-center "> 
        <img src="../img/features_screenshots/surveys.png" class="feature-screenshot"> 
        <h3 class="feature-heading"> 
            loren ipsum 
           </h3> 
        <p> 
         loren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsum 
        </p> 
       </div> 
       <div class="feature hide text-center "> 
        <img src="../img/features_screenshots/canvasser-paths.png" class="feature-screenshot"> 
        <h3 class="feature-heading"> 
            loren ipsum 
           </h3> 
        <p> 
         loren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsum 
        </p> 
       </div> 
       <div class="clearfix"></div> 
      </section> 
      <a href="#" id="loadMore"><i class="fa fa-3x fa-angle-down"></i></a> 
     </article> 
    </div> 
</div>

и это JS

$(function() { 
    $("#templates-loadMore").on('click', function (e) { 
     e.preventDefault(); 
     $("#templates >.feature:hidden").slice(0, 2).slideDown(); 
     if ($("#templates >.feature:hidden").length == 0) { 
      $("#loadMore").fadeOut('slow'); 
     } 
     $('html,body').animate({ 
      scrollTop: $(this).offset().top 
     }, 1500); 
    }); 
    $("#manuals-loadMore").on('click', function (e) { 
     e.preventDefault(); 
     $("#manuals >.feature:hidden").slice(0, 2).slideDown(); 
     if ($("#manuals >.feature:hidden").length == 0) { 
      $("#loadMore").fadeOut('slow'); 
     } 
     $('html,body').animate({ 
      scrollTop: $(this).offset().top 
     }, 1500); 
    }); 
    $("#advertise-loadMore").on('click', function (e) { 
     e.preventDefault(); 
     $("#advertise >.feature:hidden").slice(0, 2).slideDown(); 
     if ($("#advertise >.feature:hidden").length == 0) { 
      $("#loadMore").fadeOut('slow'); 
     } 
     $('html,body').animate({ 
      scrollTop: $(this).offset().top 
     }, 1500); 
    }); 
});

Я использовал #templates >.feature:hidden, потому что у меня есть несколько категорий, и я хочу, чтобы загрузить больше вариантов только тот, который пользователь щелкнул.

источник

2016-11-22 Nauman Tanwir

'он работает в кодефе, но не в моем проекте' - любые подсказки в средствах разработчика браузера? –

Возможно, вам не хватает jQuery? Bcuz, вы пытаетесь передать его на свой код – Hydro

@JaromandaX никаких ошибок в инструментах dev –

Некоторые мелкие проблемы, обнаруженные в вашем коде.

$("#templates >.feature:hidden").show().slice(0, 2)

выше линии является неправильным. согласно codepen URL вы предоставляете будет

$("#templates >.feature:hidden").slice(0, 2).slideDown();

нагрузки также больше кнопок должна быть в конце.

После этого это будет так.

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

 
    });

#templates >.feature { 
 
    display:none; 
 
}

<div class="col-md-3 col-xs-0 side-nav"> 
 
</div> 
 
<div class="col-md-9 col-xs-12"> 
 
    <div class="main container"> 
 
     <article class="post__article"> 
 
      <section class="feature-section row-fluid" id="templates"> 
 
       <h2 class="main-feature-heading" id="scrollNav-1">loren ipsum</h2> 
 
       
 

 
       <div class="feature text-center "> 
 
        <img src="../img/features_screenshots/import.png" class="feature-screenshot"> 
 
        <h3 class="feature-heading"> 
 
             loren ipsum 
 
            </h3> 
 
        <p> 
 
         loren ipsum loren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsum 
 
        </p> 
 
       </div> 
 

 
       <div class="feature text-center "> 
 
        <img src="../img/features_screenshots/filters3.PNG" class="feature-screenshot"> 
 
        <h3 class="feature-heading"> 
 
             loren ipsum 
 
            </h3> 
 
        <p> 
 
         loren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsum 
 
        </p> 
 
       </div> 
 
       <div class="feature text-center "> 
 
        <img src="../img/features_screenshots/groups.png" class="feature-screenshot"> 
 
        <h3 class="feature-heading"> 
 
             loren ipsum 
 
            </h3> 
 
        <p> 
 
         loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum 
 
        </p> 
 
       </div> 
 
    
 
       <div class="feature hide text-center "> 
 
        <img src="../img/features_screenshots/teams.png" class="feature-screenshot"> 
 
        <h3 class="feature-heading"> 
 
             loren ipsum 
 
            </h3> 
 
        <p> 
 
         loren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsum 
 
        </p> 
 
       </div> 
 
       <div class="feature hide text-center "> 
 
        <img src="../img/features_screenshots/campaign.png" class="feature-screenshot"> 
 
        <h3 class="feature-heading"> 
 
             loren ipsum 
 
            </h3> 
 
        <p> 
 
         loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum 
 
        </p> 
 
       </div> 
 
       <div class="feature hide text-center "> 
 
        <img src="../img/features_screenshots/permission.png" class="feature-screenshot"> 
 
        <h3 class="feature-heading"> 
 
             loren ipsum 
 
            </h3> 
 
        <p> 
 
         loren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsum 
 
        </p> 
 
       </div> 
 
       <div class="clearfix"></div> 
 
      </section> 
 
     </article> 
 
    </div> 
 
</div> 
 

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

 

 
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>

Fiddle: https://jsfiddle.net/tintucraju/zpu547rf/

Update

В вашем обновлении вы назначили кликах события

#templates-loadMore,#manuals-loadMore,#advertise-loadMore

, но его нет в вашем html. так изменить идентификатор

<a href="#" id="loadMore"><i class="fa fa-3x fa-angle-down"></i>Load more advertise</a>

<a href="#" id="templates-loadMore"><i class="fa fa-3x fa-angle-down"></i>Load more advertise</a>

Здесь представлена обновленная скрипку https://jsfiddle.net/tintucraju/zpu547rf/1/

Кроме того, изначально все элементы скрыты, так что если вы хотите, чтобы показать несколько первых записей о тогда сделайте это так.

$("#templates >.feature").slice(0, 2).show(); 
    $("#manuals>.feature").slice(0, 2).show(); 
    $("#advertise>.feature").slice(0, 2).show();

источник

2016-11-22 13:05:09

привет, спасибо, что ответили. Я только что редактировал мой вопрос с html и JS. любезно посмотрите. –

@NaumanTanwir Проверьте мое обновление. –

спасибо за обновленный ответ. Я делаю именно то, что вы предложили выше. Но все же, он просто «скользит вниз» и ничего не показывает. не знаю, где я ошибаюсь. Я также пробовал использовать '$ ("# templates> .feature"). Slice (0, 2) .show(); $ ("# manuals. .feature"). Slice (0, 2) .show(); $ ("# advert> .feature"). Slice (0, 2) .show(); ' вместо slideDown(), но все равно не повезло. –

Я почти там.

это как решена моя проблема.

$("#templates-loadMore").on('click', function (e) { 
    e.preventDefault(); 
    $("#templates .feature:hidden").slice(0, 3).toggleClass("hide"); 
    if ($("#templates .feature:hidden").length == 0) { 
     $("#loadMore").fadeOut('slow'); 
    } 
    $('html,body').animate({ 
     scrollTop:($(this).offset().top - $(window).height()) 
    }, 1500); 
});

Теперь просто нужно выяснить, почему это не работает.

if ($("#templates .feature:hidden").length == 0) { 
      $("#loadMore").fadeOut('slow'); 
     }

undefined, когда я вставляю его в консоль.

источник

2016-11-25 10:43:21

загрузить больше javascript not working

ответ

Смежные вопросы