Question

我的网站上有滑块，我想在里面显示随机照片。我的HTML代码如下：

<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;">
  <div class="phone" style="display:none;">
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb">
      <img src="<?= $basePath ?>images/iphone7_sl.png" 
           style="width:130px; height:250px; margin-left:auto;
                  margin-right:auto;" alt="">
    </a>
    <div class="caption">
         <a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">
          iPhone <strong>7</strong>
        </a>
    </div>
  </div>
</li>

我有大约20个列表项，我在jQuery中的脚本是：

$(document).ready(function() {
  display = 6;
  var divs = $('.phone').get().sort(function(){
    return Math.round(Math.random())-0.5;
  }).slice(0,6);
  $(divs).show();
});

但是这个脚本不起作用。问题在哪里？

Answer 1

您可以在for循环中自行重新排序元素：

for (var i = 0; i < $('.phone').length; i++) {
    j = Math.floor(Math.random() * $('.phone').length);
    $('.phone').eq(i).before($('.phone').eq(j));
}

Answer 2

您可以在此代码段中看到您的脚本正常工作

$(document).ready(function() {
  display = 6;
  var divs = $('.phone').get().sort(function(){
    return Math.round(Math.random())-0.5;
  }).slice(0,6);
  $(divs).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;">
  <div class="phone" style="display:none;">
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a>
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div>
  </div>
</li>
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;">
  <div class="phone" style="display:none;">
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a>
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div>
  </div>
</li>
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;">
  <div class="phone" style="display:none;">
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a>
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div>
  </div>
</li>
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;">
  <div class="phone" style="display:none;">
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a>
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div>
  </div>
</li>
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;">
  <div class="phone" style="display:none;">
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a>
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div>
  </div>
</li>
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;">
  <div class="phone" style="display:none;">
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a>
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div>
  </div>
</li>
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;">
  <div class="phone" style="display:none;">
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a>
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div>
  </div>
</li>
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;">
  <div class="phone" style="display:none;">
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a>
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div>
  </div>
</li>
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;">
  <div class="phone" style="display:none;">
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a>
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div>
  </div>
</li>
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;">
  <div class="phone" style="display:none;">
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a>
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div>
  </div>
</li>
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;">
  <div class="phone" style="display:none;">
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a>
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div>
  </div>
</li>

在我的网站上显示随机照片的滑块

2 个答案: