将CSS添加到jQuery中动态添加元素在聚合物组件内

我在添加CSS类到聚合物组件中的jQuery创建元素时遇到问题。将CSS添加到jQuery中动态添加元素在聚合物组件内

下面是聚合物组分：

<dom-module id="image-add"> 

<style> 

    .image { 
     height: 100%; 
    } 

</style> 

<template> 
    <div id = "container"> 
    </div> 
</template> 

<script> 
    Polymer({ 
     is: "image-add", 
     properties: { 
      images_to_add: { 
       type: Array 
      } 
     }, 
     ready:function(){ 

      var shadowRoot = this.shadowRoot || this; 
      var container = $(shadowRoot).find('#container'); 

      var new_image = $("<div></div>") 
      new_image.css({"background-image":"url('" + this.images_to_slide[1] + "')"}) 
      new_image.addClass("image"); 
      new_image.appendTo(container); 

     } 
    }); 
</script> 

</dom-module>

正如你可以看到在图像阵列即时传递到该即时通讯使用在一个动态添加股利与jQuery的帮助的背景代替聚合物组分。现在jQuery然后将“image”类添加到动态添加的div中，但是我面对的问题是我没有看到添加该类的效果。即div不会达到100％的高度。当我检查div时，它有班级，但没有班级的影响。

为什么不把这个类的效果应用到这个动态添加的div上？我猜这与Polymer有关，因为通常这会起作用。

请注意：我必须能够动态地在任何时间点生成这些div。而且背景图像风格已经被正确应用。

来源

2015-07-11 Julian Poole

你不需要这个jQuery。使用<template is="dom-repeat">标签，您可以更简单地使用纯聚合物。这更具说明性，并使用更符合聚合物原理的本地<img>标签。它也少得多的代码行。这里有一些可爱的小猫的例子。

<dom-module id="image-add"> 

    <template> 
    <template is="dom-repeat" items="{{imageUrls}}" as="imageUrl"> 
     <img id="{{calcImageId(index)}}" src="{{imageUrl}}"> 
    </template> 
    </template> 

    <script> 
    Polymer({ 
     is: "image-add", 
     properties: { 
     imageUrls: { 
      type: Array, 
      value: function() { 
      return [ 
       'http://placekitten.com/g/200/300', 
       'http://placekitten.com/g/200/300' 
      ]; 
      } 
     } 
     }, 
     calcImageId: function(index) { 
     return 'image_' + index; 
     } 
    }); 
    </script> 

</dom-module>

kitten http://placekitten.com/g/200/300 kitten http://placekitten.com/g/200/300

现在，动态地添加其他的小猫是一个单元。

document.querySelector('image-add').push('imageUrls', 'http://placekitten.com/g/200/300')

在那里，我们有它，我们的第三只小猫。

kitten http://placekitten.com/g/200/300 kitten http://placekitten.com/g/200/300 kitten http://placekitten.com/g/200/300

来源

2015-07-11 23:17:24 williamcodes

这一切都很好，但我必须能够在任何时间点动态生成它们，很遗憾，这种解决方案不会为我工作。（还是）感谢你的建议。 –

@JulianPoole你可以动态地添加内容，只需通过使用聚合物的push和pop助手来推送或弹出imagesToAdd数组。我已经更新了答案以反映这一点。 – williamcodes

是啊，我听到你在说什么..但我不能添加个人的东西，如每个人“ID”之前，他们去住：/这是一个问题...我需要添加和删除它们动态个别内容和属性。 –

您可以使用以下

<script> 
    Polymer({ 
     is: "image-add", 
     properties: { 
      images_to_add: { 
       type: Array 
      } 
     }, 
     ready:function(){ 

      var shadowRoot = this.shadowRoot || this; 
      var container = $(shadowRoot).find('#container'); 

      var new_image = $("<div>") 
      new_image.attr("style","background-image:url('" + this.images_to_slide[1] + "')"); // in this way you are adding inline style to the generated div 
      new_image.addClass("image"); 
      new_image.appendTo(container); 

     } 
    }); 
</script>

希望它会帮助你

来源

2015-07-12 00:52:55 Monah

这与应用“图像”类的过程有什么不同？这只是改变了如何添加背景图像风格已经很好地工作，这不是问题。问题是我没有看到“图像”类应用于div的任何影响。不是说背景图像样式不起作用。 –

添加在CSS图像{高度：100％！重要;} – Monah

哈哈没有多数民众赞成不会解决它：p样式不会被写入或任何东西..否则，这将是一个简单的修复，类风格简单当我检查元素时，甚至没有出现在应用风格的列表中。 –

原来则需要使用使元素：

document.createElement('div');

并将其分配给一个变量：

var some_veriable = document.createElement('div');

，然后你可以的东西与它周围使用jQuery添加类和风格等：

var some_veriable = document.createElement('div'); 
$(some_veriable).attr("id","image_1").addClass("image animating").css({"background-image":"url('" + this.images_to_slide[current_image_number] + "')"});

将它添加到聚合物DOM前所在班你现在已经建立起来了。

var some_veriable = document.createElement('div'); 
$(toLocal).attr("id","image_1").addClass("image animating").css({"background-image":"url('" + this.images_to_slide[current_image_number] + "')"}); 
Polymer.dom(this.$.container).appendChild(some_veriable)

来源

2015-07-12 06:43:11

将CSS添加到jQuery中动态添加元素在聚合物组件内

回答

相关问题