左侧点击右侧联动且可排序编辑保存选中元素参数
程序员文章站
2022-04-28 09:02:15
...
<div>
<div>
<div class="materMain" id="js_materA">
<ul>
<li>
<a href="javascript:">
<label>
<input type="hidden" name="左1" data-num="1">
<input type="checkbox" name="c_id" value="90">左1</label>
</a>
</li>
<li class="active">
<a href="javascript:">
<label>
<input type="hidden" name="左2" data-num="3" value="1">
<input type="checkbox" name="c_id" value="19">左2
</label>
</a>
</li>
<li>
<a href="javascript:">
<label>
<input type="hidden" name="左1" data-num="1">
<input type="checkbox" name="c_id" value="90">左1</label>
</a>
</li>
<li class="active">
<a href="javascript:">
<label>
<input type="hidden" name="左2" data-num="3" value="1">
<input type="checkbox" name="c_id" value="19">左2
</label>
</a>
</li>
<li>
<a href="javascript:">
<label>
<input type="hidden" name="左1" data-num="1">
<input type="checkbox" name="c_id" value="90">左1</label>
</a>
</li>
<li class="active">
<a href="javascript:">
<label>
<input type="hidden" name="左2" data-num="3" value="1">
<input type="checkbox" name="c_id" value="19">左2
</label>
</a>
</li>
</ul>
</div>
</div>
<div>
<div id="js_materADesc">
<ul class="editMater">
<li data-name="左1" data-id="1">
<div>
<a href="javascript:" class="icon-plus"></a>
<span>左1x
<b>3</b>
</span>
<a href="javascript:" class="icon-minus"></a>
</div>
</li>
<li data-name="左2" data-id="1">
<div>
<a href="javascript:" class="icon-plus"></a>
<span>左2x
<b>6</b>
</span>
<a href="javascript:" class="icon-minus"></a>
</div>
</li>
</ul>
</div>
</div>
</div>
JQ部分
$("#js_materA ul li input[type=checkbox]").on("click",function(e){
// e.stopPropagation();
var iNow = $(this).parents("li");
iNow.toggleClass("active");
iNow.find("input[type=hidden]").val(iNow.index());
if($(this).parents("li").hasClass("active")){
var iNumber = 1;
var txt = $(this).parents("li.active").find("input[type=hidden]").attr("name");
var oId = $(this).parents("li.active").find("input[type=hidden]").val();
var tmpHtml='<li data-name="'+txt+'" data-id="'+oId+'"><div><a href="javascript:" class="icon-plus"></a><span>'+txt+'x<b>'+iNumber+'</b></span><a href="javascript:" class="icon-minus"></a></div></li>';
//结构
editBtn($(tmpHtml));
//排序
//
}else if(!$(this).parents("li").hasClass("active")){
var iNow = $(this).parents("li").index();
var txt = $(this).parents("li").find("input[type=hidden]").attr("name");
var arrDel = $("#js_materADesc ul li");
for(var i=0;i<arrDel.length;i++){
var temp = arrDel[i].dataset.name;
if(txt==temp){
$("#js_materADesc ul li").eq(i).remove();
}
}
}
}) function editBtn(template){
template.appendTo("#js_materADesc ul").on("click",'a',function(){
var temp = 1;
var o = Number($(this).siblings("span").find("b").text());
if($(this).hasClass("icon-plus")){
o+=1;
} else {
if(o==1){
o=1;
} else {
o-=1;
}
}
$(this).siblings("span").find("b").text(o);
$("#js_materA ul li").eq($(this).parents("li")[0].dataset.id).find("input[type=hidden]").attr("data-num",o);
});
$("#js_materADesc ul li").sort(sortLi).appendTo($("#js_materADesc ul"));
} //排序
function sortLi(a, b){
return ($(b).data('id')) < ($(a).data('id')) ? 1 : -1; //升序排列
}说明：
给input添加点击事件（注：label的for为空时要把for去掉否则影响input选中事件）
1：checkbox选中时父集添加class="active",通过父集是否有active的class对右边显示内容进行编辑
2：选中时，把name,id都赋值给右边动态生成的li的自定义data-*属性中，方便排序以及删除
3：动态生成里的每个a点击事件特意单独写，用到了template.appendTo(父集).on(事件，元素，fn)
4：点击事件都是a的原因，判断元素class编辑功能，增/减
template.appendTo("#js_materADesc ul").on("click",'a',fn)
//编辑的数量动态赋值给左边对应元素的input[type="hidden"],方便后台取值
$("#js_materA ul li").eq($(this).parents("li")[0].dataset.id).find("input[type=hidden]").attr("data-num",o);
无论元素选择先后顺序，都会升序排列显示，一一对应
//排序
function sortLi(a, b){
return ($(b).data('id')) < ($(a).data('id')) ? 1 : -1; //升序排列
}
（编辑页面时要先初始化数据，动态添加右侧数据）
data-*属性使用技巧
获取数据 dataset.名字
已经有data-*属性的input，设置数据的时候用input.attr("data-名字",新数据) 获取数据 input.attr("data-名字")