Question

我编写了一个函数来将一些HTML代码附加到页面，如下所示：

function addGiftList(className, imgURL, Kind) {
    var $li = $('<li class="' + className + '">');
    var $img = $("<img>", { src: imgURL })
    var $br = $("<br/>");
    var $input = $('<input >', { type: 'radio', name: 'gift', kind: Kind });
    var $label = $("<label>").text("Test");

    $li.append($img);
    $li.append($br);
    $li.append($input);         
    $li.append($label);
    return $li;         
}

所有这些都将附加到className cycle-slideshow的div，然后我调用$('.cycle-slideshow').cycle();，但没有任何反应。有谁知道为什么？我可以用javascript创建HTML元素然后调用jQuery循环插件吗？

Answer 1

<强> HTML

<button>append</button>
<div class="myslider composite-example" data-cycle-fx="scrollHorz" data-cycle-slides="> div" data-cycle-timeout="2000">
  <div>
    <img src="http://malsup.github.io/images/p1.jpg" width=100%>
    <div class="cycle-overlay">first image</div>
  </div>
  <div>
    <img src="http://malsup.github.io/images/p2.jpg" width=100%>
    <div class="cycle-overlay">second image</div>
  </div>
</div>

<强> CSS

 body {
  width: 200px;
  margin: auto;
}

img {
  width: 200px;
}

<强> JS

 // first call cycle
    $('.myslider').length > 0 && $('.myslider').cycle();

    function addGiftList(className, imgURL, Kind) {
        var $div = $('<div class="' + className + '">');
        var $img = $("<img>", {
                src: imgURL
            })
        var $input = $('<input >', {
            type: 'radio',
            name: 'gift',
            kind: Kind
        });
        var $label = $("<label>").text("Test");
        $div.append($img);
        $div.append($input);
        $div.append($label);

        // dynamically adding slider: this is a plugin method see documentation
        $('.myslider').cycle('add', $div);

        return;
    }

    // dynamic add button for example
    $('button').on('click', function() {
        // add function for example
        addGiftList('myclass cycle-slide', 'https://placeholdit.imgix.net/~text?txtsize=15&txt=image%20added&w=200&h=150&txttrack=0');
    })

请看我的codepen的这个链接。我已经解决了你的问题。 http://codepen.io/prashen/pen/PNPbRR

为什么jQuery循环插件不起作用？

1 个答案: