之前有做过一些页面动效,现在有了这个属性的话,忽然有些想法:
当用户点击选择li之后,对应的如果是左右两栏的话左边是大标题,右边是大标题对应的内标题选择项,在选择的时候:
第一种方法;在选择的时候点击右侧的时候该li会添加一个class样式,在这里这个css样式暂时设置为“liac”然后如果右侧外围是用ul包围起来的话,那么右侧ul的数量和左侧li标题的数量是对应的,那么只需要一个判定,右侧是否现在有选择后的样式,这里暂时设置为:"tiac" 如果有的话就不管了,如果没有的话则添加对应样式,(这里的难点在于 :如何判定,如果用户在点击选择内选项后,继而又取消选择了呢?那么这里如何实时监测左边对应的右侧内选项是否有选中的呢?这点考虑下吧~暂时定为这个是可以解决的)。 然后在点击提交的时候删除所有左侧不包含“tiac”样式的li和右侧不包含“liac”的li(忽然想到了,如果添加一个自定义样式到右侧的每个容器ul中呢?当该ul内含有包含“liac样式的li”的时候,在最后点提交的时候就直接删除左侧不包含tiac的li和右侧自定义样式为关闭的ul,然后继续删除所有包含tiac的li 的ul下面不包含liac的li,那么整理出来的就是所有包含liac的li和它的容器,还有与有包含liac的li的ul对应index的左侧标题,这时只需要存储起来可以用多条数组存储起来,比如【"id","name".“age”】这种形式存储起来)
第二种方法:前面的走法差不多,右侧的选出来后,这里需要用到循环,在点击提交的时候遍历出包含有liac的li元素,及其需要的元素,然后获取父元素的index(),然后获取左侧对应的标题的index,即可。(其实走法差不多的,开始还有一种方法是忘记了。。。)
<!DOCTYPE html>
<html>
< head>
< meta charset= "utf-8">
< title></title >
< script src= "js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8" ></script>
</ head>
< body>
< ul>
< li class= "c" title= "1">1 <span>23123</span ></li>
< li class= "a c" title= "2">2</li >
< li class= "a c" title= "3">3</li >
< li title= "4">4</li >
< li title= "5">5</li >
< li title= "6">6</li >
< input type= "button" name= "a" id= "a" value= "删除" />
</ ul>
</ body>
< script type= "text/javascript">
$("#a").click( function() {
// $("ul li").remove("[title=1]");
// console.log($("ul li").text());
$("ul li:not(li.c)").remove();
})
</script>
</html>