Jquery .addClass() 不工作

Question

我将此代码复制粘贴到我正在编辑的页面中，从我复制它的页面可以正常工作，但在我的页面中却不能。我已经添加了 link rel= 代码，因为我认为缺少它是 jquery 不起作用的原因，但它仍然不起作用，我将其复制到我的页面的页面中的代码正是一样，所以我想知道为什么它在我的身上不起作用。

还有一件事，当我检查元素时，我看到了 class 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 按照指示操作，祝您好运。

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

Jquery .addClass() 不工作

Jquery .addClass() not working

jquery

html

css

addclass