如何实例化 JQuery 小部件 - 使用什么文本

Question

我已经创建了一个可用的小部件，但我不知道如何在页面上将代码实例化到运行（当我保存页面时，它在查看源代码中看起来很棒）。我试过了

      // ===== Instantiate Carousel ===== //
      jQuery("#carousel").carousel();

      // ===== Instantiate Carousel ===== //
      jQuery("#carousel");

请在此处查看演示：Demo Link

都不行。这个轮播是 W3C Bootstrap 轮播。我已经阅读了有关让小部件实例化的信息，并且我有一个使用上面第一种方法的工作选项卡小部件（使用选项卡而不是旋转木马） - 但该小部件使用 JQueryUI 而旋转木马不...

 function searchCallback(data) {
      if(debug_messages){console.log("json data loaded.");}
      // ===== Inject UL tag ===== //
      jQuery("#carousel").addClass( "carousel slide" ).attr('data-ride', 'carousel').append('<ul class="carousel-indicator">');
      var ws_ftr = data.ws_ftr.records;
      console.log(JSON.stringify(ws_ftr));
      jQuery.each(ws_ftr, function(index, ftr) {
           jQuery("#carousel>ul").append('<li data-target="carousel" data-slide-to="'+ftr[0]+'"></li>');
           jQuery(".carousel li:first").addClass("active");
      });
      jQuery("#carousel>ul").after('<div class="carousel-inner">');
      jQuery.each(ws_ftr, function(index, ftr) {
           jQuery(".carousel-inner").append('<div class="carousel-item"><img src="img/features_sliding/' + ftr[3] + '" alt="feature - ' + ftr[2] + '"/>');
           jQuery(".carousel-inner");
           jQuery(".carousel-item li:first").addClass("active");
      });
      jQuery(".carousel-inner").after('<!-- Left and right controls --><a class="carousel-control-prev" href="#demo" data-slide="prev"><span class="carousel-control-prev-icon"></span></a><a class="carousel-control-next" href="#demo" data-slide="next"><span class="carousel-control-next-icon"></span></a>');  
      // ===== Instantiate Carousel ===== //
      jQuery("#carousel").carousel();
 };

Answer 1

您只是没有正确添加 active class。

本部分：

jQuery.each(ws_ftr, function(index, ftr) {
  jQuery(".carousel-inner").append('<div class="carousel-item"><img src="img/features_sliding/' + ftr[3] + '" alt="feature - ' + ftr[2] + '"/>');
  jQuery(".carousel-inner"); // <-- No use for that line, remove it...
  jQuery(".carousel-item li:first").addClass("active");  // Problem is here!
});

替换：

jQuery(".carousel-item li:first").addClass("active");

有：

$(".carousel-item").first().addClass("active");

.carousel-item 是 div...不是 li。并在 .each() 循环完成后添加 class。

结果：

jQuery.each(ws_ftr, function(index, ftr) {
  jQuery(".carousel-inner").append('<div class="carousel-item"><img src="img/features_sliding/' + ftr[3] + '" alt="feature - ' + ftr[2] + '"/>');
});
$(".carousel-item").first().addClass("active");  // Place it here, after the each loop.

;)

如何实例化 JQuery 小部件 - 使用什么文本

How to instantiate the JQuery widget - what text to use

javascript

jquery

carousel

instantiation