我点击它时尝试移动列表项,然后我按照accepted answer的代码进行操作。它确实适用于JSfiddle,请参阅here。
但是当我将此代码移动到html文件中时,它不起作用。整个文件的内容如下所示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test the jQuery cycle</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$('.simple li').click(function() {
var $this = $(this);
$this.insertBefore($this.siblings('.simple li:nth-child(1)'));
});
</script>
<style type="text/css">
.for-list li{
float:left; width:60px;
}
.for-list{
list-style-type:none;
}
</style>
</head>
<body>
<ul class="simple for-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</body>
</html>
我找不到这段代码有什么问题?
答案 0 :(得分:3)
在<head>
:
$('.simple li').click(function() {
尚未存在此类项目(事实上,根本不存在任何元素)。因此处理程序附加到 nothing 。它不会影响以后创建的.simple li
项目。
你可以:
$(document).ready(...)
中,以便在实际存在各种元素之后运行 on
处理程序,例如$(document).on('click', '.simple li', function() ...)
.for-list li{
float:left; width:60px;
}
.for-list{
list-style-type:none;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="simple for-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<!-- set the handler *after* creating the elements -->
<script type="text/javascript">
$('.simple li').click(function() {
var $this = $(this);
$this.insertBefore($this.siblings('.simple li:nth-child(1)'));
});
</script>
&#13;
答案 1 :(得分:1)
你错过了$(文件).ready()。这样:
$(document).ready(function(){
$('.simple li').click(function() {
var $this = $(this);
$this.insertBefore($this.siblings('.simple li:nth-child(1)'));
});
});