Question

我只能加载 CSS 样式图片。浏览器不显示imgB。源代码也只显示imgA。我只想在特定循环时调用Object的backgroundImage值我的HTML。

<div onclick="displayCards()">Display Cards</div>

我的 Javascript对象包含这些DIV 元素的属性。每张卡片都有一张独特的图片imgB。我为对象创建了数组，因此我可以使用for 循环循环显示它们。

var card_troop = { title : "troop" , type : "Unit" , image : "url(troop.png)" } ;
var card_base = { title : "base" , type : "Structure" , image : "url(base.png)" } ;
var card_wood = { title : "wood" , type : "Resource" , image : "url(wood.png)" } ;

var list = [
   card_troop ,
   card_base ,
   card_wood
   ] ;

DIV 元素由我的displayCards() 函数创建，附加到我{{1}的body文件。

HTML

使用对象属性 function displayCards() { card = document.createElement("div") ; var card_id = document.createAttribute("id") ; card_id.value = list[x].title ; card.setAttributeNode(card_id) ; var card_class = document.createAttribute("class") ; switch (list[x].type) // Card Theme Comparison { case "Unit" : card_class.value = "unit" ; break ; case "Structure" : card_class.value = "structure" ; break ; case "Resource" : card_class.value = "resource" ; break ; } card.setAttributeNode(card_class) ; var imgA = card.style.backgroundImage ; var imgB = list[x].image ; card.style.backgroundImage = imgA + " , " + imgB ; }定义的switch 比较，switch (list[x].type)，每个type:将拥有三个 CSS DIV 值中的一个。

backgroundImage

另一个功能 div.unit { background-image:url( theme_unit.png ) ; } div.structure { background-image:url( theme_structure.png ) ; } div.resource { background-image:url( theme_resource.png) ; }调用builder()并附加对象 displayCards()。

card

我相信我的问题就在这里。由于function builder() { for ( x = 0 ; x < 9 ; x++ ) { displayCards() ; document.body.appendChild(card) ; } }仍未附加。需要注意的是：DIV的索引高于imgA，并且具有透明度，可以看到imgB。

imgB

我是一名极简主义编码员，这是我能想到的最短时间。我不想多次重复网址。我的对象列表将比三个长得多。 NO JQUERY

Answer 1

从未在js中有效，但你的js解决方案应该是js parallel。在div上添加/删除类，并根据css中的类交换背景图像。我假设这需要更少的js作为奖励。希望这可以帮助。

Answer 2

var card_troop = { title : "troop" , type : "Unit" , image : "url(troop.png)" } ;
var card_base = { title : "base" , type : "Structure" , image : "url(base.png)" } ;
var card_wood = { title : "wood" , type : "Resource" , image : "url(wood.png)" } ;

var list = [
    card_troop,
    card_base,
    card_wood
];


function buildCard(card) {
    var elem = document.createElement('div'),
        elemCloned,
        computedBackgroundUrl,
        backgroundUrl;

    elem.id = card.title;
    elem.className = card.type.toLowerCase();


    // Clone element and temporary append to body
    elemCloned = elem.cloneNode();
    elemCloned.style.display = 'none';
    document.body.appendChild(elemCloned);

    computedBackgroundUrl = window.getComputedStyle(elemCloned)['background-image'];

    if (computedBackgroundUrl) {
        var match = computedBackgroundUrl.match(/^url\((.*)\)/);
        if (match) {
            backgroundUrl = match[1];
        }
    }

    // remove element after retrieved background-image value
    elemCloned.parentNode.removeChild(elemCloned);
    elemCloned = null;

    elem.style.backgroundImage = (backgroundUrl ?  'url(' + backgroundUrl + '), ' : '') + card.image;

    computedBackgroundUrl = null;
    backgroundUrl = null;

    return elem;
}

function displayCards() {
    var body = document.body;

    for (var i = 0, len = list.length; i < len; i++) {
        body.appendChild( buildCard(list[i]) );
    }

}

Answer 3

你应该通过这种方法。替换＆＃34; backgroundimage＆＃34;和＆＃34; foregroundimage＆＃34;使用适当的URL（当然）。之后，您可以使用开关调用showCard方法。 showCard（true）显示卡片的正面。 showCard（false）显示卡片的背面。

＆＃13;

var card = function(title, type, image) {
  this.title = title;
  this.type = type;
  this.image = image;
  this.background = "url('backgroundimage')";
};

card.prototype.showCard = function(turn) {
  if (turn) {
    var ele = document.createElement("div");
    ele.appendChild(document.createTextNode(this.title));   
    ele.appendChild(document.createTextNode(this.type));
    ele.style.backgroundImage = this.image;
    document.body.appendChild(ele);
  } else {
    var ele = document.createElement("div");
    ele.style.backgroundImage = this.background;
    document.body.appendChild(ele);
  }
};

function displayCards() {
  var card_troop = new card("TroopTitle", "TroopType", "url('foregroundimage')");
  card_troop.showCard(true);
  var card_troop_2 = new card("Troop2Title", "TroopType", "url('foregroundimage2')");
  card_troop_2.showCard(false);
};

＆＃13;

div {
  min-width: 50px;
  height: 120px;
  border: solid;
  float: left;
}

＆＃13;

<input type="button" onclick="displayCards()" value="Display Cards" />

＆＃13;

麻烦使用Javascript对象为两个背景图像设置DIV样式

3 个答案: