JS-скрипт для фильтрации раздела div не работает с загрузкой карусели? - PullRequest
Новая
       13

JS-скрипт для фильтрации раздела div не работает с загрузкой карусели?

0 голосов
/ 02 мая 2018

я уже давно работаю над этим, но все же я так далек от решения. Прямо сейчас у меня есть огромные страницы с тоннами DIV, которые нужно скрывать, пока кто-нибудь не выберет их. Обычно это работает нормально, но когда мне нужно показать div, где внутри есть карусель, карусель начнет показывать все изображения вместо того, чтобы показывать по одному за раз.

Прошу прощения за мой плохой английский, заранее спасибо

************* UPDATE ***************

Что ж, я нашел Iusse, но до сих пор не нашел решения. Iusse о карусели, которая не работает, если она находится на скрытом div во время загрузки страницы. есть ли способ, чтобы это началось, когда его div стал видимым из шкуры? Использование начальной загрузки с каруселью, заранее спасибо 

$(document).ready(function() {
  // Handler for .ready() called.
  var value = this.value,
    all = $('.item'),
    selected = all.filter('.' + "none");

  all.hide();
  selected.show();
  $('#item-filter-select').change(function() {

    var value = this.value,
      all = $('.item'),
      selected = all.filter('.' + value);

    all.hide();
    selected.show();

  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-filter portfolio-filter cbp-l-filters-button text-center">
  <form>
    <select id="item-filter-select">
      <option value="none" id="none">select</option>
      <option value="test" id="test">testPlan</option>
      <option value="try" id="try">Try</option>
    </select>
  </form>
</div>

<div class="item-display" id="item-display">
  <div class="item test" id="item-test" data-type="test">
    <div class="cbp-item test">
      <div class="container text-center pt150 pb140">
        <div class="service-desc pb60 bg-white">
          <h3>H3 TEST</h3>
          <h4></h4>
        </div>
        <br>
        <p>
          some text
        </p>
        <div class="row bg-gray pt40 pb40">
          <div class="col-lg-1">

          </div>
          <!-- team member -->
          <div class="col-lg-5 wow fadeInDown" data-wow-duration="500ms" data-wow-delay="200ms">
            <article class="team-mate">
              <div class="member-photo">
                <!-- features media -->
                <div id="myCarousel20" class="carousel slide col-lg-12 feature-media wow fadeInUp" data-wow-duration="500ms" data-ride="carousel">
                  <!-- Indicators -->
                  <ol class="carousel-indicators">
                    <li data-target="#myCarousel20" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel20" data-slide-to="1"></li>
                    <li data-target="#myCarousel20" data-slide-to="2"></li>
                    <li data-target="#myCarousel20" data-slide-to="3"></li>
                  </ol>
                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">
                    <div class="item test active">
                      <img src="https://cdn2.iconfinder.com/data/icons/pretty-office-10/24/Test-paper-24.png" class="img-center" alt="">
                    </div>
                    <div class="item test ">
                      <img src="https://image.freepik.com/free-icon/test-quiz_318-86103.jpg" class="img-center" alt="">
                    </div>
                    <div class="item test">
                      <img src="https://cdn2.iconfinder.com/data/icons/pretty-office-10/24/Test-paper-24.png" class="img-center" alt="">
                    </div>
                  </div>
                </div>
              </div>

              <!-- member name & designation -->
              <div class="member-title">
                <h3>test</h3>
                <span></span>
              </div>
              <!-- /member name & designation -->

              <!-- about member -->
              <div class="member-info">
                <p>

                </p>
              </div>
              <!-- /about member -->
            </article>
          </div>
          <!-- end team member -->
          <div class="col-lg-1">

          </div>

        </div>
        <!-- End row -->
      </div>
    </div>
  </div>

1 Ответ

0 голосов
/ 03 мая 2018

Ну, в конце концов, я нашел решение, хотя. Я немного изменил скрипт на это: 

    $(document).ready(function() {
    // Handler for .ready() called.
    var value = this.value,
        all = $('.item'),
        selected = all.filter('.' + "none");

    all.hide();
    selected.show();
    $('#item-filter-select').change(function() {

        var value = this.value,
            all = $('.item'),
            selected = all.filter('.' + value);
            if(value=='test'){
              all.hide();
            $('#item-test').load(document.URL +  ' #item-test');
            selected.show();
          }else{
        all.hide();
        selected.show();
      }


    });

});

Теперь каждый раз, когда я выбираю скрытый div с каруселью внутри, он сначала загружает div снова [$ ('# item-test'). Load (document.URL + '# item-test'); ] и затем он покажет это [selected.show (); ].

Я надеюсь, что это будет полезно для других.

...