jquery - jquery显示不可见的div

Question

我有几个问题，因为我是 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>

我想使用 JQuery 将隐藏 div 的类更改为在使用指定的 onclick 函数单击锚标记时可见。这是最好的方法吗？我应该在隐藏的 div 周围有一个更新面板吗？我使用的第一种方法是调用页面重新加载，在其中我为所选标签的图片注入了 innerHTML，它有效，但我假设这是一种业余且不太有效的方法来完成此操作。

此查询不起作用；（无法让 picDisplay 函数识别参数，因此我对其中一个 div id 进行了硬编码以尝试使其工作）

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

        }
    });

</script>

Answer 1

这是我要做的：

给每个链接添加一个data-rel标签，指的是相关的隐藏div：

<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()
});

编辑 - 错过了 toggleclass 目标中的“#”。这里的工作示例：http: //jsfiddle.net/aF5Pg/

Answer 2

试试这个：

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

您应该阅读以下内容：id 选择器。

您还应该将 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');
});

Answer 3

实际上有两种简单的方法可以做到这一点：

1. 使用 .css()
2. 使用 .toggleClass() 或 .hasClass()、.removeClass() 和 .addClass()

我认为最简单的方法是使用 .css()

你将会拥有 ：

function toggleVisible() {
    if($(this).css("display") == "none")
        $(this).css("display", "block");
    else
        $(this).css("display", "none");
}

Answer 4

1. 不，您不需要更新面板来实现您想要做的事情。

2. 其次，我们需要更多关于您的方案的信息，以便为您获得最佳结果。按钮在哪里，是否会为每个要显示的按钮分配一个按钮？

IE

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

<input id="onBoardButton" />

将会：

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

如果您的情况比这更复杂，那么请解释您要做什么。

Answer 5

据我所知，asp.net 将根据组件 ID 生成随机客户端 ID。所以你可以在 Jquery 上使用包含选择器。

对于您的代码，只需修改为：

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

        }
    });

</script>

您还可以使用带有选择器的结束或从选择器开始操作

Answer 6

这是另一种方法。它利用了您可以向 HTML 元素添加多个类的事实。首先隐藏所有“可隐藏”的 div，然后单击找到您需要显示的 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.
});