Question

我复制粘贴此代码在我编辑的页面中，从我复制它正常工作的页面，但在我的页面中没有。我已经添加了链接rel =代码，因为我认为缺少这是jquery无法正常工作的原因但它仍然没有，从我将其复制到我的页面的页面中的代码完全相同，所以我想知道为什么它不是在我的工作。

还有一件事，当我检查元素时，我看到了类nivo-caption尽管我为了测试目的而删除了它，但.addClass部分是唯一无法工作的是否删除它。谢谢你帮助我，不太了解jquery

jQuery(document).ready(function($) {

    $('.nivoSlider').nivoSlider({
        effect: 'random',
        slices: 15,
        boxCols: 12,
        boxRows: 6,
        animSpeed: 500,
        pauseTime: 8000,
        directionNav: true,
        controlNav: true,
        pauseOnHover: true,
        prevText: '<i class="icon-angle-left"></i>',
        nextText: '<i class="icon-angle-right"></i>',
        afterLoad: function(){
            $('#slider').find('.nivo-caption').addClass('slider-caption-bg');
        }
    });

});

这是我的HTML

<div class="nivoSlider">
                    <img src="images/slider/boxed/2.jpg" alt="Slider 1" title="#nivocaption1" />
                    <img src="images/slider/boxed/3.jpg" alt="Slider 2" title="#nivocaption2" />
                </div>

                <div id="nivocaption1" class="nivo-html-caption">Ultra Responsive Design</div>
                <div id="nivocaption2" class="nivo-html-caption">Unlimited Color Options</div>

Answer 1

好的，复制并粘贴我在此代码段中所做的工作。

<强>更新

转到此处：http://plnkr.co/edit/a4ywRcQyrHAqV5yTibFQ?p=preview

在左侧，有一些文件：

的index.html
的script.js
的style.css
insert.html

打开insert.html按照说明操作，祝你好运。

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>33907731</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/nivoslider/3.2/nivo-slider.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.5.0/css/font-awesome.min.css">
  <style>
    .fa {
      font-size: 48px;
      color: blue;
      height: 48px;
      width: 18px;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="https://cdn.jsdelivr.net/nivoslider/3.2/jquery.nivo.slider.pack.js"></script>
</head>

<body>
  <div class="nivoSlider">
    <img src="https://placehold.it/300x200/000/Fff.png&text=FIRST" alt="Slider 1" title="#nivocaption1" />
    <img src="https://placehold.it/300x200/fff/000.png&text=LAST" alt="Slider 2" title="#nivocaption2" />
  </div>

  <div id="nivocaption1" class="nivo-html-caption">Ultra Responsive Design</div>
  <div id="nivocaption2" class="nivo-html-caption">Unlimited Color Options</div>
  <script>
    jQuery(document).ready(function($) {

      $('.nivoSlider').nivoSlider({
        effect: 'random',
        slices: 15,
        boxCols: 12,
        boxRows: 6,
        animSpeed: 500,
        pauseTime: 8000,
        directionNav: true,
        controlNav: true,
        pauseOnHover: true,
        prevText: '<i class="fa fa-angle-left"></i>',
        nextText: '<i class="fa fa-angle-right"></i>',
        afterLoad: function() {
          $('.nivoSlider').find('.nivo-html-caption').addClass('slider-caption-bg');
        }
      });

    });
  </script>
</body>

</html>

＆＃13;

Jquery .addClass（）不起作用

1 个答案: