在使用Jquery隐藏其他ul和li之后显示某些li

时间：2015-06-30 21:42:48

标签： javascript jquery html

关于这个site我在使用隐藏/显示选项的JQuery时遇到了问题。如果单击单选按钮，则可以隐藏不同的选项，但这样做也会隐藏选项中的一些项目符号。我认为这是因为我的代码是要隐藏div中的所有内容＆＃34; row-fluid＆＃34;但是我不知道如何让它不会影响我想要隐藏的第一级以下的人。

我使用的代码是：

TITLE: Microsoft SQL Server Management Studio
------------------------------

Backup failed for Server 'SELEKSQL'.  (Microsoft.SqlServer.SmoExtended)

For help, click: http://go.microsoft.com/fwlink?ProdName=Microsoft+SQL+Server&ProdVer=10.0.1600.22+((SQL_PreRelease).080709-1414+)&EvtSrc=Microsoft.SqlServer.Management.Smo.ExceptionTemplates.FailedOperationExceptionText&EvtID=Backup+Server&LinkId=20476

------------------------------
ADDITIONAL INFORMATION:

System.Data.SqlClient.SqlError: A nonrecoverable I/O error occurred on file "C:\Program Files\Microsoft SQL Server\MSSQL10.MSSQLSERVER\MSSQL\Backup\Navision4.bak:" 112(failed to retrieve text for this error. Reason: 15105). (Microsoft.SqlServer.Smo)

For help, click: http://go.microsoft.com/fwlink?ProdName=Microsoft+SQL+Server&ProdVer=10.0.1600.22+((SQL_PreRelease).080709-1414+)&LinkId=20476

谢谢！

3 个答案:

答案 0 :(得分：0)

在span标记中包含您想要的内容，并在jQuery中进行适当的更改似乎有所帮助：

＆＃13;
＆＃13; 
$(".rdo0").click(function(){

    $("div.row-fluid ul:nth-child(1) li:nth-child(1) span").removeClass('hidden');
    $("div.row-fluid ul:nth-child(1) li:nth-child(2) span").removeClass('hidden');
    $("div.row-fluid ul:nth-child(1) li:nth-child(3) span").removeClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(1) span").removeClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(2) span").removeClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(3) span").removeClass('hidden');
        $("div.row-fluid ul:nth-child(3) li:nth-child(1) span").removeClass('hidden');
    $("div.row-fluid").children("span").removeClass('hidden');
})

//Show Premium
$(".rdo1").click(function(){
    $("div.row-fluid ul:nth-child(1) li:nth-child(3) span").removeClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(3) span").removeClass('hidden');
        $("div.row-fluid").children("span").removeClass('hidden');
    $("div.row-fluid ul:nth-child(1) li:nth-child(1) span").addClass('hidden');
//  $("div.rsm_fixed_height ul:nth-child(1) li:nth-child(3)").removeclass('hidden');
    $("div.row-fluid ul:nth-child(1) li:nth-child(2) span").addClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(1) span").addClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(2) span").addClass('hidden');


})

//Show Mid Tier
$(".rdo2").click(function(){

    $("div.row-fluid ul:nth-child(1) li:nth-child(2) span").removeClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(2) span").removeClass('hidden');
    $("div.row-fluid").children("span").removeClass('hidden');
    $("div.row-fluid ul:nth-child(1) li:nth-child(1) span").addClass('hidden');
    $("div.row-fluid ul:nth-child(1) li:nth-child(3) span").addClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(1) span").addClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(3) span").addClass('hidden');



})

//Show DIY
$(".rdo3").click(function(){
    $("div.row-fluid ul:nth-child(1) li:nth-child(1) span").removeClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(1) span").removeClass('hidden');
    $("div.row-fluid").children("span").removeClass('hidden');
    $("div.row-fluid ul:nth-child(1) li:nth-child(2) span").addClass('hidden');
    $("div.row-fluid ul:nth-child(1) li:nth-child(3) span").addClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(2) span").addClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(3) span").addClass('hidden');
})
＆＃13; 
.hidden {
    display: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="left" id="rdoBoxes">

    <h2>Help me choose</h2>
    <input class="rdo0" type="radio" name="selector1" value ="all" checked>Show me everything<br>
    <input class="rdo1" type="radio" name="selector1" value="full">I want a hands-off ownership experience that will keep my {modal /images/productImages/professional_binder.jpg|title=Highly organized, mylar reinforced, tabbed binder. A sophisticated touch for the sophisticated pilot.}Executive Binder{/modal} up to date via insert shipments, professionally transcribe (including parts and inspections) unlimited records per year, and provide 48 hour turn around support<br>
    <input class="rdo2" type="radio" name="selector1" value="mid">I want to stay completely digital and have to 10 records professionally transcribed (including parts and inspections) per year<br>
    <input class="rdo3" type="radio" name="selector1" value="diy" >I'm interested in doing everything on my own using the {modal /images/Web-Portal-Screenshot-890PM-cropped-optimized.jpg|title=PlaneLogiX Web Portal}easy to use interface{/modal}

</div>
        
        <div class="row-fluid">
            <ul>
                <li>
                    <span>
                         First Line
                    </span>
                </li>
                <li>
                    <span>
                         Second Line
                    </span>
                </li>
                <li>
                    <span>
                         Third Line
                    </span>
                </li>
            </ul>
            <ul>
                <li>
                    <span>
                         First Line
                    </span>
                </li>
                <li>
                    <span>
                         Second Line
                    </span>
                </li>
                <li>
                    <span>
                         Third Line
                    </span>
                </li>
            </ul>
        </div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我建议你使用更干净的代码。喜欢这个小提琴http://jsfiddle.net/qsyogckx/2/

警告：

请勿在选择器中使用.row-fluid，因为在您的文档中包含大量.row-fluid非常常见。

对无线电使用click事件可能是一种不好的做法。如果单击已检查的无线电，则将调用该事件。记住这一点。

将您的单选按钮封装在<label>内，这样用户就不必完全点击圆圈来检查选项。

<h2>Help me choose</h2>
<label><input class="rdo0" type="radio" name="selector1" value ="all" checked>Show me everything</label>
 <br>
 <label><input class="rdo1" type="radio" name="selector1" value="full">I want a hands-off ownership experience that will keep my</label>
 <br>
 <label><input class="rdo2" type="radio" name="selector1" value="mid">I want to stay completely digital and have to 10 records professionally transcribed (including parts and inspections) per year</label>
 <br>
 <label><input class="rdo3" type="radio" name="selector1" value="diy" >I'm interested in doing everything on my own using the</label>

<div id="myThings">
    <ul class="premium">
        <li>1 premium</li>
        <li>2 premium</li>
        <li>3 premium</li>
    </ul>
    <ul class="midTier">
        <li>1 midTier</li>
        <li>2 midTier</li>
        <li>3 midTier</li>
    </ul>
    <ul class="diy">
        <li>1 diy</li>
        <li>2 diy</li>
        <li>3 diy</li>
    </ul>
</div>

Jquery：

$('input[name="selector1"]').change(function () {

    var selected = $('input[name="selector1"]:checked').val();
    var $div = $('#myThings');

    if (selected == 'all') {
        $div.find('ul').show();
    } else if (selected == 'full'){
        $div.find('ul:not(.premium)').hide();
        $div.find('ul.premium').show();
    } else if (selected == 'mid'){
        $div.find('ul:not(.midTier)').hide();
        $div.find('ul.midTier').show();
    } else {
        //....
    }

});

答案 2 :(得分：0)

根据您的标记查看此fiddle，因此必须为您服务。只需使用第n个子伪类来隐藏或显示具有所需索引的子li元素

$('.thumbnails .rsm_container:nth-child(2)').hide();
相关问题
最新问题