目前正在开发点击和重新排序功能,我需要一些帮助。
| | list item 1
| content | list item 2
| | list item 3
基本上,当您单击 3 个列表项之一时,它就会显示在列表左侧的内容框中。在将元素分类到内容框中后,列表会重新排序。
| list item 2 | list item 1
| content | list item 3
| |
我目前的情况是:
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<script>
jQuery("li").click(function() {
jQuery(this).parent().prepend(jQuery(this));
});
</script>
任何见解都会非常有帮助。先感谢您。
最佳答案
在您的内容区域中创建一个空的 ul
,为您拥有的列表的 li
分配一个点击处理程序,然后在点击时移动 li
到内容区域中的 ul
。
$('#plist li').on('click', function() {
var $contentli = $('#contentli');
$contentli.find('li').appendTo($('#plist'));
$(this).prependTo('#contentli');
})
body {
display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<ul id="contentli">
<li>1</li>
</ul>
<h1>content</h1>
</div>
<ul id="plist">
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
关于javascript - 点击并重新排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41525850/