关于这个site我在使用隐藏/显示选项的JQuery时遇到了问题。如果单击单选按钮,则可以隐藏不同的选项,但这样做也会隐藏选项中的一些项目符号。我认为这是因为我的代码是要隐藏div中的所有内容" row-fluid"但是我不知道如何让它不会影响我想要隐藏的第一级以下的人。
我使用的代码是:
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
谢谢!
答案 0 :(得分:0)
在span标记中包含您想要的内容,并在jQuery中进行适当的更改似乎有所帮助:
$(".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');
})

.hidden {
display: none;
}

<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;
答案 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();