將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中動態添加元素在聚合物組件內

回答

相關問題