gpt4 book ai didi

javascript - 使用 JavaScript 添加 CSS 类

转载 作者:行者123 更新时间:2023-11-29 18:36:49 29 4
gpt4 key购买 nike

我有以下代码,通过向复选框添加图像 sprite 使复选框更漂亮。

Javascript:

$(document).ready(function() {

/* see if anything is previously checked and reflect that in the view*/
$(".checklist input:checked").parent().addClass("selected");

/* handle the user selections */
$(".checklist .checkbox-select").click(
function(event) {
event.preventDefault();
$(this).parent().addClass("selected");
$(this).parent().find(":checkbox").attr("checked", "checked");
}
);

$(".checklist .checkbox-deselect").click(
function(event) {
event.preventDefault();
$(this).parent().removeClass("selected");
$(this).parent().find(":checkbox").removeAttr("checked");
}
);
});

CSS:

.checklist
{
list-style: none;
margin: 0;
padding: 0;
}
.checklist li
{
float: left;
margin-right: 10px;
background: url(resources/i/checkboxbg.gif) no-repeat 0 0;
width: 105px;
height: 150px;
position: relative;
font: normal 11px/1.3 "Lucida Grande" , "Lucida" , "Arial" ,Sans-serif;
}
.checklist li.selected
{
background-position: -105px 0;
}
.checklist li.selected .checkbox-select
{
display: none;
}
.checkbox-select
{
display: block;
float: left;
position: absolute;
top: 118px;
left: 10px;
width: 85px;
height: 23px;
background: url(resources/i/select.gif) no-repeat 0 0;
text-indent: -9999px;
}
.checklist li input
{
display: block;
}
a.checkbox-deselect
{
display: none;
color: white;
font-weight: bold;
text-decoration: none;
position: absolute;
top: 120px;
right: 10px;
}
.checklist li.selected a.checkbox-deselect
{
display: block;
}
.checklist li label
{
display: block;
text-align: center;
padding: 8px;
}

标记:

<ul class="checklist">  
<li>
<asp:CheckBox ID="CheckBox1" Text="<img src='' />Option" runat="server" />
<a class="checkbox-select" href="#">Select</a>
<a class="checkbox-deselect" href="#">Cancel</a>
</li>
</ul>

选中复选框后,class="selected"被添加到 <li> .问题在于,如果用户点击后退按钮,复选框仍处于选中状态(页面缓存),但不会重新应用 css。我总是可以添加一些缓存控制,这样浏览器每次都会加载页面的新副本,这样复选框就不会被选中,但我宁愿将类重新应用到列表项。

每个<ul class="checklist">包装在一个 asp.net 面板中,该面板呈现为一个 id 为 ct100_ContentPlaceHolder1_Panel1 的 div - 如果选中该复选框,我将如何遍历该面板中的每个复选框并重新附加 css 类?

提前致谢!

最佳答案

您可以使用 :checked selector 在加载时执行此操作:

$('.checklist :checked').parent().addClass('selected');

关于javascript - 使用 JavaScript 添加 CSS 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2371941/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com