Question

在我的asp.net mvc4视图中，我有一些嵌套的div来显示图像，下面是一个文本，如下所示：

<div id="Outer1" class="elementStatus">
    <div class="image">
        <img id="MyImg1" src="@Url.Content("~/images/InitialImage.gif")">
    </div>
    <div class="text">
        Statuts Text
    </div>
</div>

<div id="Outer2" class="elementStatus">
    <div class="image">
        <img id="MyImg2" src="@Url.Content("~/images/InitialImage.gif")">
    </div>
    <div class="text">
        Statuts Text
    </div>
</div>

和css：

.elementStatus
{
    visibility: hidden;
}

.image{
    float: left;
    margin-top: 2px;
    padding-top: 1px; 
    padding-left: 10px;
    width: 35px;    
}
.text{
    float: left;
    margin-top: 1px;
    padding-left: 14px;
    padding-bottom: 2px;
    width: 35%;
    font-weight: bold;
    font-size: 1em;
}

就像上面的代码一样，我有一些其他的，比方说，超过20个。

正如您所看到的，外部div（称为外部）最初是隐藏的，因此最初不会显示图像和文本。最初，还设置了一些默认图像，这些初始图像是GIF动画。

然后启动一个进程，并将这些div设置为可见（没有图像被更改）。

第一个问题是默认情况下图片和文字不可见（它会继续隐藏）。如果我在css中默认设置为可见而不是隐藏，则它们可见。

我可以做的就是：

$('#Outer' + elemId).prop("visibility", "visible");

请注意，上面的行在for，我的意思是，elemId将是1,2，依此类推......

第二期： 如果我从头开始设置为css可见，则显示默认的GIF动画图像和文本，没问题，但在执行过程中，我想更改其他新闻的图像（不是动画，这些新图像是PNG图像，而不是GIF）所以我执行以下操作：

$('#MyImg' + elemId).prop("src", '@Url.Content("~/images/NewImage.png")');

再次注意，在上面的行中，elemId将是1,2，依此类推......

我的问题是图像被更改但它们显示为黑色十字架，然后，几秒钟后，当过程终止时，它们开始正确显示。这有什么不对？

Answer 1

您需要设置样式属性，元素没有名为visibility的属性，它是具有可见性属性的样式属性。

所以：

$('#Outer' + elemId).css("visibility", "visible");

你提到的关于图像的黑色十字架很可能是图像网址不正确，浏览器只显示未找到图像的占位符。如果您检查控制台，您可能会看到图像网址是否实际被加载（即如果不是，您将看到404错误）。

使用jquery使图像在div中可见

1 个答案: