Question

我已经有一段时间了，但我还没有解决方案。现在我有一个大量的DIV页面必须隐藏，直到有人选择它。通常它工作正常，但是当我在里面显示一个转盘时，转盘将开始显示所有图像而不是每次显示一个。

为了我可怜的英语，请提前谢谢

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

我已经找到了iusse，但仍然不是解决方案。 Iusse是关于在加载页面中隐藏的div上没有工作的旋转木马。是否有任何方法可以让它开始时，他的div从隐藏中可见？使用轮播引导程序，提前谢谢

＆＃13;

$(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();

  });

});

＆＃13;

<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>

＆＃13;

Answer 1

最后我找到了一个解决方案。我把脚本改成了这个：

    $(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（）; ]

我希望对其他人有用。

用于过滤div部分的JS脚本不适用于轮播引导程序？

1 个答案: