나는 웹 개발이 처음이고 이것에 약간 붙어 있습니다. 나는 아이디어를 염두에두고 있지만 jQuery를 사용하여 공식화하는 방법을 모릅니다. 버튼을 클릭 할 때마다 목록 항목으로 업데이트되어야하는 정렬되지 않은 목록이 있습니다. 목록 항목이 강조 표시되면 추가 버튼을 클릭하면 해당 li 안에 하위 목록이 생성됩니다. 샘플 마크 업은 다음과 같습니다.
$(document).ready(function () {
$("#btnAdd").click(function () {
addExpression();
});
function addExpression() {
var mainList = document.getElementById("mainList");
var li = document.createElement("li");
var alink = document.createElement("a");
var str = document.createTextNode("test");
alink.appendChild(str);
li.appendChild(alink);
mainList.appendChild(li);
}
function createSublist() {
var sublist = document.createElement("ul");
var li = document.createElement("li");
var alink = document.createElement("a");
var str = document.createTextNode("test");
alink.appendChild(str);
li.appendChild(alink);
sublist.appendChild(li);
return sublist;
}
$(document).on("click", "ul.expression li", function () {
$("ul.expression li").removeClass("highlight");
$(this).addClass("highlight");
});
}); .expression ul {
list-style: none;
}
.expression li {
width: 25%;
height: 50px;
text-align: center;
color: #B84DFF;
cursor: pointer;
border-style:solid;
border-width:1px;
}
.expression li.highlight {
background-color: cyan;
font-weight: bold;
}
.hide {
display: none;
}<button id="btnAdd">Add</button>
<div id="containerDiv">
<ul id="mainList" class="expression">
</ul>
</div>내 주요 문제는 하위 목록을 올바르게 삽입 할 수 있도록 선택한 목록 항목을 가져 오는 방법입니다. 미리 감사드립니다.
선택한 목록 항목에 "highlight"클래스를 배치 했으므로 다음과 같이이를 사용하여 선택한 항목을 가져올 수 있습니다.
var $list = $("#mainList");
var $selectedItem = $list.children('li.highlight:first');
if ($selectedItem.length > 0) {
// There is a selected item.
} else {
// There is no selected item.
}
선택한 항목이 이미 <ul>내부에 있는지 또는 추가해야하는지 확인하는 것과 유사한 작업을 수행 할 수 있습니다 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다