Question

我在向Polymer组件内部的jQuery创建元素添加CSS类时遇到问题。

这是聚合物组件：

<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>

正如你所看到的，我将一组图像传递到Polymer组件中，我在jQuery的帮助下将其放置在动态添加的div的背景中。现在，jQuery会添加＆＃34; image＆＃34;对于动态添加的div，但我面临的问题是我没有看到添加该类的效果。即，div不会达到100％的高度。当我检查div时，它有班级但没有班级的影响。

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

请注意：我必须能够动态地在任何时间点生成这些div。并且背景图像样式已经很好地应用了。

Answer 1

你不需要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

Answer 2

您可以使用以下

<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>

希望它会帮助你

Answer 3

原来你需要使用：

制作元素

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)

将CSS添加到jQuery动态添加了Polymer Component内部的元素

3 个答案: