0

私のページには、次の html ブロッ​​ク (カミソリ付き) があります。

<td class="upperTable">
                            <div id="picLeftButton" class="pictureButton" unselectable="on" style="margin-right: 5px;">&lArr;</div><div id="picRightButton" unselectable="on" class="pictureButton" style="margin-left: 5px;">&rArr;</div>
                            <span id="picm" class="mugshot"><span class="fileNameDisplay"><span style="color: #808080; font-size: 1.1em;">Pic Currently Stored:&nbsp;&nbsp;</span>@if((string)Session["gMugshotFileName"]==null || (string)Session["gMugshotFileName"]==""){<span class="noFile">[NONE]</span>}else{@Session["gMugshotFileName"]}</span>Mugshot:
                                <input id="mugUp" name="mugUp" type="file" maxlength="50" /><button onclick="mugshotClearPicVE()" id="MugshotClearPic" type="button">Clear Pic</button><input id="mugIsPicClear" name="mugIsPicClear" type="hidden" value="" />
                                @if(Session["gMugshot"]!=null)
                                {
                                    <img id="Mugshot" class="picDisplay" style="width: 400px; height: 350px;" alt="Mugshot" src="/ShowImage.cshtml?Id=@Session["gEntryID"]" />
                                }
                                else
                                {
                                    <img id="MugshotNoPic" class="picDisplay" style="width: 400px; height: 350px;" alt="No Picture Loaded" src="/Images/noPicture.png" />
                                }
                                </span>
                            <span id="pic1" class="mugshot" hidden="hidden"><span class="fileNameDisplay"><span style="color: #808080; font-size: 1.1em;">Pic Currently Stored:&nbsp;&nbsp;</span>@if((string)Session["gPOIPic1FileName"]==null || (string)Session["gPOIPic1FileName"]==""){<span class="noFile">[NONE]</span>}else{@Session["gPOIPic1FileName"]}</span>Picture 1:
                                <input id="picUp1" name="picUp1" type="file" maxlength="50" accept="image/*" /><button onclick="POIPic1ClearPicVE()" id="POIPic1ClearPic" type="button">Clear Pic</button><input id="POIPic1IsPicClear" name="POIPic1IsPicClear" type="hidden" value="" />
                                @if(Session["gPOIPic1"]!=null)
                                {
                                    <img id="POIPic1" class="picDisplay" style="width: 400px; height: 350px;" alt="POIPic1" src="/ShowImage2.cshtml?Id=@Session["gEntryID"]" />
                                }
                                else
                                {
                                    <img id="POIPic1NoPic" class="picDisplay" style="width: 400px; height: 350px;" alt="No Picture Loaded" src="/Images/noPicture.png" />
                                }
                                </span>
                            <span id="pic2" class="mugshot" hidden="hidden"><span class="fileNameDisplay"><span style="color: #808080; font-size: 1.1em;">Pic Currently Stored:&nbsp;&nbsp;</span>@if((string)Session["gPOIPic2FileName"]==null || (string)Session["gPOIPic2FileName"]==""){<span class="noFile">[NONE]</span>}else{@Session["gPOIPic2FileName"]}</span>Picture 2:
                                <input id="picUp2" name="picUp2" type="file" maxlength="50" accept="image/*" /><button onclick="POIPic2ClearPicVE()" id="POIPic2ClearPic" type="button">Clear Pic</button><input id="POIPic2IsPicClear" name="POIPic2IsPicClear" type="hidden" value="" />
                                @if(Session["gPOIPic2"]!=null)
                                {
                                    <img id="POIPic2" class="picDisplay" style="width: 400px; height: 350px;" alt="POIPic2" src="/ShowImage3.cshtml?Id=@Session["gEntryID"]" />
                                }
                                else
                                {
                                    <img id="POIPic2NoPic" class="picDisplay" style="width: 400px; height: 350px;" alt="No Picture Loaded" src="/Images/noPicture.png" />
                                }
                                </span>
                            <span id="pic3" class="mugshot" hidden="hidden"><span class="fileNameDisplay"><span style="color: #808080; font-size: 1.1em;">Pic Currently Stored:&nbsp;&nbsp;</span>@if((string)Session["gPOIPic3FileName"]==null || (string)Session["gPOIPic3FileName"]==""){<span class="noFile">[NONE]</span>}else{@Session["gPOIPic3FileName"]}</span>Picture 3:
                                <input id="picUp3" name="picUp3" type="file" maxlength="50" accept="image/*" /><button onclick="POIPic3ClearPicVE()" id="POIPic3ClearPic" type="button">Clear Pic</button><input id="POIPic3IsPicClear" name="POIPic3IsPicClear" type="hidden" value="" />
                                @if(Session["gPOIPic3"]!=null)
                                {
                                    <img id="POIPic3" class="picDisplay" style="width: 400px; height: 350px;" alt="POIPic3" src="/ShowImage4.cshtml?Id=@Session["gEntryID"]" />
                                }
                                else
                                {
                                    <img id="POIPic3NoPic" class="picDisplay" style="width: 400px; height: 350px;" alt="No Picture Loaded" src="/Images/noPicture.png" />
                                }
                            </span></br>

4 つのスパンがあることに気付くでしょう。ここでのアイデアは、手動で (div から) 作成されたボタンを使用してそれらを「ページング」することであり、実際には jQuery を使用してそれらを非表示/非表示にします (なぜ「ボタン」要素を使用しますが、それは無関係です)。ここで私が抱えている問題は、世界で最悪のブラウザー (常に満場一致で IE) が最後の 3 つのスパンを非表示にしないことです。一度に1つだけスペースを割り当てたページ。（アイデアは、4つの「ページ」があり、最初のページは非表示にならず、他の3つは非表示になるということです）。いずれにせよ、hidden="hidden" を使用するかどうかにかかわらず、span 属性を hidden ($(".mugshot").attr('hidden') としてレンダリングしてみてください

表にあるからでしょうか？もしそうなら、すべてのブラウザで使用するためにこれらの要素を選択するには、他にどのような方法がありますか?

4

1 に答える 1

0

さて、これを解決するために、いくつか追加する必要がありました。最初に、HTML レベルで非表示のページを開始する 3 つの要素に style="display: none" を追加する必要がありました。次に、jQuery にいくつかの行を追加する必要がありました。

変更前:

                $("#picm").prop("hidden", true);
                $("#pic1").prop("hidden", false);
                $("#pic2").prop("hidden", true);
                $("#pic3").prop("hidden", true);

変更後:

                $("#picm").prop("hidden", true);
                $("#pic1").prop("hidden", false);
                $("#pic2").prop("hidden", true);
                $("#pic3").prop("hidden", true);
                $("#picm").css("display", "none");
                $("#pic1").css("display", "inline");
                $("#pic1").css("display", "normal");
                $("#pic2").css("display", "none");
                $("#pic3").css("display", "none");

css ディスプレイを使用して IE で非表示にするために 3 行を繰り返すだけでなく、IE 用に 4 行目 (.css('display', 'inline')) と 5 行目 (.css( 'display', 'normal')) FireFox の場合。

すべてのブラウザが Chrome のように賢くさえすればよいのですが、IE のように馬鹿げたブラウザは存在しないことに同意します。

于 2012-10-25T15:10:04.810 に答える