0

ASP.Net を初めて使用するので、いくつか質問があります

  1. 次のように設定された aspx ページがあります。

    順序付けられていないリスト エリアの隠し div 隠し div

順序なしリストのコード:

<div class="literaltext">
        <p> We utilize two types of systems for mixing EnerBurn&reg; with your fuel supply to deliver it to your diesel engine,<br /> On-Board systems and Bulk Fueling systems. Click on an item below for more information.</p>
        <ul class="ulGreen">
            <li><b>On-Board systems - Road Vehicle</b><span style="color:black;"> (See an installation picture<a href="#" onclick="picDisplay('onBoardVehiclepicdisplay')">here</a>)</span> </li>
            <li><b>On-Board systems - Marine Vessel</b><span style="color:black;"> (See an installation picture<a href="#" onclick="picDisplay('onBoardVesselpicdisplay')">here</a>)</span> </li>
            <li><b>On-Board systems - Fueling Barge</b><span style="color:black;"> (See an installation picture<a href="#" onclick="picDisplay('onBoardBargepicdisplay')">here</a>)</span> </li>
            
        </ul>
    </div>

非表示の div は次のように設定されています (簡潔にするために 3 つのうち 2 つだけを表示しています)。

<div id="onBoardVehiclepicdisplay" class="invisible">
        <fieldset class="dynamicinjectionpics">
            <legend>"Schlumberger On-Board Injection Unit"</legend>
             <img Height="300px" Width="400px" alt=""
             src="Images/InjectionUnitPictures/SchlumbergerInjectionUnit_FrackTruck.jpg"/>&nbsp;&nbsp;&nbsp;
             <img Height="300px" Width="400px" alt=""
             src="Images/InjectionUnitPictures/SchlumbergerInjectionUnit_FrackTruck_withEnclosure.jpg"/>
             <br /><span id="Image1Text" runat="server">Typical injection unit installation (shown here on a Fracking Unit)</span>

        </fieldset>
    </div>
    <div id="onBoardVesselpicdisplay" class="invisible">
        <fieldset class="dynamicinjectionpics">
            <legend>"Vessel Fuel Intake Line Mounted Injection System"</legend>
             <img Height="300px" Width="400px" alt=""
             src="Images/InjectionUnitPictures/SP-600 Injector.jpg"/>&nbsp;&nbsp;&nbsp;
             <img Height="300px" Width="400px" alt=""
             src="Images/InjectionUnitPictures/MarionInjector Installation.JPG"/>
             <br /><span id="Span1" runat="server">Typical injection unit installation for single vessel</span>

        </fieldset>
    </div>

指定されたonclick関数を使用してアンカータグをクリックすると、JQueryを使用して非表示のdivのクラスを表示に変更したいと考えています。これはこれを行うための最良の方法ですか？非表示の div の周りに更新パネルを配置する必要がありますか? 私が使用した最初の方法は、選択したタグの写真に innerHTML を挿入するページの再読み込みを呼び出すことでした。これは機能しますが、これは素人っぽく、効果の低い方法だと思います。

このクエリは機能しませんでした;( picDisplay 関数にパラメーターを認識させることができなかったので、動作させるために div id の 1 つをハードコーディングしました)

<script>
    $(function () {
        function picDisplay(divId) {
            $("[id='onBoardVehiclepicdisplay']").toggleClass('visible');

        }
    });

</script>
4

6 に答える 6

1

これが私がすることです：

関連する非表示の div を参照する data-rel タグを各リンクに追加します。

<a href="#" data-rel="onBoardVehiclepicdisplay">here</a>

次の jQuery を使用します。

$('.ulGreen').delegate('li a', 'click', function(e){
    e.preventDefault();
    var target = $(this).attr('data-rel');
    $('#' + target).toggleClass('invisible'); // or show()/hide()
});

編集 - トグルクラスのターゲットから「#」を逃しました。ここでの実例: http://jsfiddle.net/aF5Pg/

于 2012-09-21T08:36:52.537 に答える
0

  1. いいえ、やろうとしていることを達成するために更新パネルは必要ありません。

  2. 次に、最良の結果を得るには、シナリオに関する情報がもう少し必要です。ボタンはどこにありますか?また、表示しようとしているそれぞれに 1 つのボタンが割り当てられますか?

すなわち

<div id="onBoardVesselpicdisplay">
</div>

<input id="onBoardButton" />

だろう：

$('#onBoardButton').on('click', function() {
    $('#onBoardVesselpicdisplay').toggleClass('visible');
});

シナリオがそれよりも複雑な場合は、何をしようとしているのかを説明してください。

于 2012-09-21T08:35:57.257 に答える
0

これを試して：

$('#onBoardVehiclepicdisplay').toggleClass('visible');

これを読む必要があります: id selector。

また、 onclick 属性 (非推奨) を次のものに置き換える必要があります。

<li><a href="#onBoardVehiclepicdisplay">...</a>

$('li > a').click(function (event) {
    event.preventDefault(); //to block the link

    var id = $(this).attr('href');
    $(id).toggleClass('visible');
});
于 2012-09-21T08:31:58.377 に答える
0

実際には、2 つの簡単な方法があります。

  1. .css() を使用
  2. .toggleClass() または .hasClass()、.removeClass() および .addClass() を使用します

最も簡単なのは .css() を使用することだと思います

あなたが持っているでしょう：

function toggleVisible() {
    if($(this).css("display") == "none")
        $(this).css("display", "block");
    else
        $(this).css("display", "none");
}
于 2012-09-21T08:32:23.100 に答える
0

別の方法を次に示します。HTML要素に複数のクラスを追加できるという事実を利用しています。最初に「非表示可能」なすべての div を非表示にし、onclick で表示する必要がある div を見つけて表示します。より現代的な方法は、data-rel属性を使用することだと思います（ただし、私は仕事で忙しすぎて調べることができません-まだ完全には採用していません）

ロード時に div はすべて非表示になります。

$(document).ready(function() {
    //Hide all of them initially
    $('.toHide').hide();
});

LI内のアンカーをクリックすると、表示する div のクラス名がアセンブルされ、JQuery.show() を使用して非表示を解除します。

$('LI A').click(function() {
    $('.toHide').hide(); //hide all the divs first 
    $('.div-' +    ($(this).attr('class'))).show(); //reveal the one you want.
});
于 2012-09-21T08:45:12.837 に答える
0

私が知っているように、asp.netはコンポーネントIDに基づいてランダムなクライアントIDを生成します。Jqueryでcontainセレクターを使用できます。

コードを次のように変更するだけです。

<script>
    $(function () {
        function picDisplay(divId) {
            $("[id*='onBoardVehiclepicdisplay']").toggleClass('visible');

        }
    });

</script>

end with selectorまたはstart with selectorを使用して操作することもできます

于 2012-09-21T08:42:10.267 に答える