添加 CSS 到 jQuery 在 Polymer Component 中动态添加的元素

Question

我在将 CSS class 添加到 Polymer 组件内 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>

如您所见，我将一组图像传递到 Polymer 组件中，该组件用于在 jQuery 的帮助下放置在动态添加的 div 的背景中。现在 jQuery 然后将 "image" 的 class 添加到动态添加的 div 但我面临的问题是我看不到添加 class 的效果.即 div 不会达到 100% 的高度。当我检查 div 它有 class 但没有 class.

的影响

为什么 class 的效果没有应用到这个动态添加的 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>

现在，动态添加另一只小猫非常简单。

document.querySelector('image-add').push('imageUrls', '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 中动态添加的元素

Adding CSS to jQuery dynamically added element inside of Polymer Component

css

jquery

polymer