Question

我正在尝试使用Sencha Touch做一些简单的样式应用程序。具体来说，我认为这会使id =“piece-5”的图像变得不透明：

Ext.DomHelper.applyStyles(Ext.DomQuery.selectNode('img#piece-5'), 'opacity: 1');

但事实并非如此。 DomQuery似乎传递了一个没有连接到实际DOM元素的对象。

我在这里做错了什么？

更新

首先，我了解CSS不透明度的工作原理。是的，img是透明的，我试图让它变得不透明，就像我在问题中所说的那样。 [这是对已被删除的答案的回应。]

我只有几个星期进入Sencha，所以我认为我误解了Ext.DomQuery是如何工作的，但显然问题出在我的代码的其他地方，所以这里有更多的细节。

我有一个面板，其中包含<li>元素中的一些图像。 <li>上设置了背景图像，因此将包含的img透明（opacity: 0）显示背景图像。这工作正常。现在我试图通过将img元素的不透明度设置为1来“隐藏”背景图像。

小组有这个听众：

listeners: {
    el: {
        tap: this.imgFlip,
        delegate: 'img'
    }
}

调用此功能：

imgFlip: function (item) {
    if(typeof this.flipped == 'undefined'){
        this.flipped = new Array();
    }

    Ext.DomHelper.applyStyles(item.target, 'opacity: 0');

    this.flipped.push(item.target.id);

    if(this.flipped.length > 1){
        console.log(this.flipped);
        for(var i=0; i<this.flipped.length; i++){
            var el = Ext.DomQuery.selectNode('img#' + this.flipped[i]);
            Ext.DomHelper.applyStyles(el, 'opacity: 1');
            console.log(el);
        }
        this.flipped = [];
    }
}

此时，想法只是允许用户点击一个图像以“显示”其下的内容，然后当他们点击另一个图像时，它会短暂隐藏第二个图像，然后再显示两个图像。

点击2项后，我在控制台中看到了这个：

["piece-6", "piece-5"]
<img src="img/jadelogo.jpg" style="width: 80px; opacity: 1; " id="piece-6" class="artifact-2">
<img src="img/jadelogo.jpg" style="width: 80px; opacity: 1; " id="piece-5" class="artifact-1">

但是图像保持透明，如果我在DOM中查看它们，我会看到：

<img src="img/jadelogo.jpg" style="width: 80px; opacity: 0; " id="piece-6" class="artifact-2">

我希望这能澄清这个问题。

Sencha：使用DomHelper＆amp ;; DomQuery

0 个答案: