Question

我有一个javascript循环功能设置。它与div元素一起由按钮动态生成。我无法知道如何为每个动态创建的元素正确附加此旋转滑块，以便它可以为每个元素单独操作而不是影响所有元素，而只处理第一个创建的元素。如示例中所示：

旋转功能

$(function() {
   $('.s1').slider({
      range: 'min',  
      min: -13,
      max: 13,
      slide: refreshRotate
   });

   function refreshRotate() {
      var rotate = $('.s1').slider('value'),
          x = $('.x');
          x.html(rotate);
      $('.list').css('-webkit-transform', 'rotate(' + rotate + 'deg)');
      $('.list').css('-moz-transform', 'rotate(' + rotate + 'deg)');
      $('.list').css('-ms-transform', 'rotate(' + rotate + 'deg)');
      $('.list').css('-o-transform', 'rotate(' + rotate + 'deg)');
      $('.list').css('transform', 'rotate(' + rotate + 'deg)');
   }
});

动态生成

var dom = {

        // Build the main button
        buildButton: function(){

            // Create new DOM element - div
            var button = document.createElement('div');

            // Set element attribute
            button.setAttribute('id', 'strip');
            button.setAttribute('class', 'newclass');            

            // Style the element
            button.style.width = "500px";
            button.style.height = "400px";
            button.style.margin="0px 10px 0px 30px";
            // Add content - FileAPI
            button.innerHTML = '<div class="s1"></div><div class="list"></div>';

            // Print element
            document.body.appendChild(button);
        }
    };

 document.getElementById("first-div").onclick = dom.buildButton;

Answer 1

看起来您只为第一张图片配置了一次滑块。要为每个图像创建一个独立的旋转滑块，请在buildButton函数中为单个图像在本地配置它。在那里，您可以通过jquery轻松创建新元素，并进行必要的一对一绑定。

Answer 2

使用.each（）应该启用//倾斜滑块在每个.list上运行，而不是只运行一次。我没有使用#ID，但滑块脚本确实正确循环。

   var dom = {

        // Build the main button
        buildButton: function(){

            // Create new DOM element - div
            var button = document.createElement('div');

            // Set element attribute
            button.setAttribute('id', 'strip');
            button.setAttribute('class', 'newclass');            

            // Style the element
            button.style.width = "500px";
            button.style.height = "400px";
            button.style.margin="0px 10px 0px 30px";
            // Add content - FileAPI
            button.innerHTML = '<div class="s1"></div><div class="list"></div>';





            // Print element
            document.body.appendChild(button);


            //Tilt Slider

 $('.list').each(function() {   
$(function() {
$('.s1').slider({
range: 'min',  
min: -13,
max: 13,
slide: refreshRotate

});


function refreshRotate() {
var rotate = $('.s1').slider('value'),
x = $('.x');
x.html(rotate);
$('.list').css('-webkit-transform', 'rotate(' + rotate + 'deg)');
$('.list').css('-moz-transform', 'rotate(' + rotate + 'deg)');
$('.list').css('-ms-transform', 'rotate(' + rotate + 'deg)');
        $('.list').css('-o-transform', 'rotate(' + rotate + 'deg)');
        $('.list').css('transform', 'rotate(' + rotate + 'deg)');
}
});

});




        }
    };





document.getElementById("first-div").onclick = dom.buildButton;

如何将javascript附加到动态创建的元素？

2 个答案: