我在将CSS类添加到Polymer组件内部的jQuery创建的元素时遇到问题。
这是聚合物成分：
.image {
height: 100%;
}
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 = $("")
new_image.css({"background-image":"url('" + this.images_to_slide[1] +"')"})
new_image.addClass("image");
new_image.appendTo(container);
}
});如您所见，即时通讯将图像数组传递到Polymer组件中，该组件用于借助jQuery放置在动态添加的div的背景中。 现在jQuery然后将" image"类添加到动态添加的div中，但是我面临的问题是我看不到添加该类的效果。 即div的高度不会达到100％。 当我检查div时，它具有类，但没有类的影响。
为什么不将类的效果应用于此动态添加的div？ 我猜想它与Polymer有关，因为通常这会起作用。
请注意：我必须能够在任何时间动态地生成这些div。 并且背景图像样式已经很好地应用了。
您不需要jQuery。使用标记，您可以使用纯聚合物更简单地完成此操作。这是更具说明性的，并使用与聚合物原理更一致的本机
标签。它的代码行也少得多。这是一些可爱的小猫的工作示例。
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;
}
});小猫http://placekitten.com/g/200/300
小猫http://placekitten.com/g/200/300
现在，动态添加另一只小猫变得轻而易举。
document.querySelector('image-add').push('imageUrls', 'http://placekitten.com/g/200/300')我们有了它，我们的第三只小猫。
小猫http://placekitten.com/g/200/300
小猫http://placekitten.com/g/200/300
小猫http://placekitten.com/g/200/300
一切都很好，但是我必须能够在任何时间点动态地生成它们，因此可悲的是，该解决方案对我来说不起作用。 (还是)感谢你的建议。
@JulianPoole您可以通过使用聚合物推入和弹出帮助器将imagesToAdd数组推入或弹出来动态添加内容。香港专业教育学院更新了答案以反映这一点。
是的，我听到了你在说什么..但是我无法在每个人上线之前向他们添加诸如" id"之类的东西：/这有点问题...我需要使用单独的内容和属性动态添加和删除它们。
在代码中
来自哪里？
@JulianPoole item来自，表示items数组的成员。如果要将其别名为image，则可以使用as标记。您可以使用声明性语法和数据绑定，轻松地将诸如" id"之类的单个事物添加到每个事物中，然后再进行发布。如果您真的想使用jQuery势在必行，则可以，但是您可以与该库抗争。这就是为什么您的解决方案需要更多行代码的原因。
@JulianPoole我将自定义ID以声明方式添加到答案中，以防万一。
原来，您需要使用以下元素制作元素：
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] +"')"});在将其添加到Polymer 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)您可以使用以下内容
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 = $("")
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);
}
});希望对你有帮助
这与我在应用"图像"类方面得到的区别有何不同？这只是改变了背景图像样式的添加方式，已经可以正常工作了，这不是问题。问题是我看不到将" image"类应用于div的任何效果。并不是说背景图像样式无效。
在CSS图片中添加{高度：100％！重要；}
哈哈，那不是要解决的问题：p样式被覆盖或任何其他形式..否则那将是一个简单的解决方法，当我检查类时，类样式甚至根本不会出现在应用样式列表中元件。
