如果使用 jQuery 选中复选框,则将父项的 class 复制到其父项的父项的 class
Copy parent's class to it's parent's parent's class if checkbox is checked with jQuery
例子
之前:
<ul>
<li class="cat-item cat-item-1">
<input type="checkbox" id="1"></li>
<li class="cat-item cat-item-2 current-cat">
<input type="checkbox" id="2"></li> <-checked
</ul>
我希望在它的父项 class 中包含 "cat-item-#number#",当它也是 "current-cat" 或者当它的复选框状态被选中时。 (复选框可以默认开始选中)
Jquery之后:
<ul class="cat-item-2">
<li class="cat-item cat-item-1">
<input type="checkbox" id="1"></li>
<li class="cat-item cat-item-2 current-cat">
<input type="checkbox" id="2"></li> <-checked
</ul>
选中第一个复选框后:
<ul class="cat-item-1 cat-item-2">
<li class="cat-item cat-item-1">
<input type="checkbox" id="1"></li> <-checked
<li class="cat-item cat-item-2 current-cat">
<input type="checkbox" id="2"></li> <-checked
</ul>
然后在取消选中第二个复选框后:
<ul class="cat-item-1">
<li class="cat-item cat-item-1">
<input type="checkbox" id="1"></li> <-checked
<li class="cat-item cat-item-2 current-cat">
<input type="checkbox" id="2"></li>
</ul>
我该怎么做?我不在乎 class 中的第一个 "cat-item" 是否也被复制了。
我不知道 jquery,但我想做这样的事情:
初始化:
$if(":checkbox") is checked -> $(this).parent().parent().toggleClass((this.parent().class());
点击:
$(":checkbox").on('click', function(){
if(":checkbox") is checked -> $(this).parent().parent().toggleClass((this.parent().class());
if ((":checkbox") is unchecked) -> remove it's class from paren.parent's class});
$(document).ready(function () {
$("#chkbox1").click(function () {
if ($(this).is(":checked")) {
$(this).parent().parent().addClass("cat-item-1");
} else {
$(this).parent().parent().removeClass("cat-item-1");
}
});
$("#chkbox2").click(function () {
if ($(this).is(":checked")) {
$(this).parent().parent().addClass("cat-item-2");
} else {
$(this).parent().parent().removeClass("cat-item-2");
}
});
});
您可以尝试类似的方法:
$(".cat-item [type=checkbox]").change(function() {
$(".current-cat").removeClass("current-cat");
if ($(this).prop("checked"))
$(this).parent().parent().addClass("cat-item-" + $(this).attr("id"));
else
$(this).parent().parent().removeClass("cat-item-" + $(this).attr("id"));
});
下面的代码将 运行 加载页面并将负责添加 类 已选中的复选框:
$(document).ready(function() {
$(".cat-item [type=checkbox]").each(function() {
if ($(this).prop("checked"))
$(this).parent().parent().addClass("cat-item-" + $(this).attr("id"));
else
$(this).parent().parent().removeClass("cat-item-" + $(this).attr("id"));
});
});
这是一个工作演示:JSFiddle
检查这个。
这适用于模式 cat-item-#number#
(即使有不止一种这样的模式并且也独立于 id
)
jQuery(document).ready(function($){
$("input[type=checkbox]").on('click', function(){
$parent = $(this).parent();
var cls = $parent.attr('class').match(/[\w-]*cat-item-[\w-]*/g);
cls = cls.join(' ');
if($(this).is(":checked")){
$parent.parent().addClass(cls);
}
else{
$parent.parent().removeClass(cls);
}
});
});
例子
之前:
<ul>
<li class="cat-item cat-item-1">
<input type="checkbox" id="1"></li>
<li class="cat-item cat-item-2 current-cat">
<input type="checkbox" id="2"></li> <-checked
</ul>
我希望在它的父项 class 中包含 "cat-item-#number#",当它也是 "current-cat" 或者当它的复选框状态被选中时。 (复选框可以默认开始选中)
Jquery之后:
<ul class="cat-item-2">
<li class="cat-item cat-item-1">
<input type="checkbox" id="1"></li>
<li class="cat-item cat-item-2 current-cat">
<input type="checkbox" id="2"></li> <-checked
</ul>
选中第一个复选框后:
<ul class="cat-item-1 cat-item-2">
<li class="cat-item cat-item-1">
<input type="checkbox" id="1"></li> <-checked
<li class="cat-item cat-item-2 current-cat">
<input type="checkbox" id="2"></li> <-checked
</ul>
然后在取消选中第二个复选框后:
<ul class="cat-item-1">
<li class="cat-item cat-item-1">
<input type="checkbox" id="1"></li> <-checked
<li class="cat-item cat-item-2 current-cat">
<input type="checkbox" id="2"></li>
</ul>
我该怎么做?我不在乎 class 中的第一个 "cat-item" 是否也被复制了。
我不知道 jquery,但我想做这样的事情:
初始化:
$if(":checkbox") is checked -> $(this).parent().parent().toggleClass((this.parent().class());
点击:
$(":checkbox").on('click', function(){
if(":checkbox") is checked -> $(this).parent().parent().toggleClass((this.parent().class());
if ((":checkbox") is unchecked) -> remove it's class from paren.parent's class});
$(document).ready(function () {
$("#chkbox1").click(function () {
if ($(this).is(":checked")) {
$(this).parent().parent().addClass("cat-item-1");
} else {
$(this).parent().parent().removeClass("cat-item-1");
}
});
$("#chkbox2").click(function () {
if ($(this).is(":checked")) {
$(this).parent().parent().addClass("cat-item-2");
} else {
$(this).parent().parent().removeClass("cat-item-2");
}
});
});
您可以尝试类似的方法:
$(".cat-item [type=checkbox]").change(function() {
$(".current-cat").removeClass("current-cat");
if ($(this).prop("checked"))
$(this).parent().parent().addClass("cat-item-" + $(this).attr("id"));
else
$(this).parent().parent().removeClass("cat-item-" + $(this).attr("id"));
});
下面的代码将 运行 加载页面并将负责添加 类 已选中的复选框:
$(document).ready(function() {
$(".cat-item [type=checkbox]").each(function() {
if ($(this).prop("checked"))
$(this).parent().parent().addClass("cat-item-" + $(this).attr("id"));
else
$(this).parent().parent().removeClass("cat-item-" + $(this).attr("id"));
});
});
这是一个工作演示:JSFiddle
检查这个。
这适用于模式 cat-item-#number#
(即使有不止一种这样的模式并且也独立于 id
)
jQuery(document).ready(function($){
$("input[type=checkbox]").on('click', function(){
$parent = $(this).parent();
var cls = $parent.attr('class').match(/[\w-]*cat-item-[\w-]*/g);
cls = cls.join(' ');
if($(this).is(":checked")){
$parent.parent().addClass(cls);
}
else{
$parent.parent().removeClass(cls);
}
});
});