1

私の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 以上あります。

ご覧のとおり、outer と呼ばれる外側の div は最初は非表示になっているため、最初はイメージもテキストも表示されません。また、最初はいくつかのデフォルト画像が設定されており、これらの初期画像はアニメーション GIF です。

次に、プロセスが開始され、それらの div が表示に設定されます (画像は変更されません)。

最初の問題は、デフォルトでは画像とテキストが表示されていないことです (非表示のままです)。cssでデフォルトで非表示ではなく表示に設定すると、表示されます。

それらを表示するために私がすることは次のとおりです。

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

上記の行は for 内にあることに注意してください。つまり、elemId は 1、2 などになります...

2 番目の問題: 最初から css で表示するように設定すると、デフォルトのアニメーション gif 画像とテキストが表示され、問題はありませんが、プロセスが実行されている間に、他のニュース (アニメーションではなく、これらの新しいニュース) の画像を変更したい画像はgifではなくPNG画像です）ので、次のことを実行します。

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

上記の行で、elemId は 1、2 などになることに注意してください...

ここでの問題は、画像が変更されても黒い十字として表示され、数秒後にプロセスが終了すると正しく表示されるようになることです。ここで何が問題なのですか？

4

1 に答える 1

3

スタイル プロパティを設定する必要がありますvisibility。要素に対して呼び出されるプロパティはありません。可視性プロパティを持つのはスタイル プロパティです。

そうする：

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

画像について言及している黒い十字は、おそらく画像の URL が間違っている可能性が高く、ブラウザには画像が見つからないプレースホルダーのみが表示されます。コンソールを確認すると、画像の URL が実際にロードされているかどうかを確認できる場合があります (つまり、ロードされていない場合は 404 エラーが表示されます)。

于 2013-10-02T20:53:42.823 に答える