jquery中prependTo()方法怎么让它只执行一次

<html>
<head>
<title>无标题文档</title>
<style type="text/css" media="screen">
a{margin: 10px;}
.btn{
padding:20px;
background:#0FF;
color:#FFF;
}
.bg-deb{
background:#999;
color:#000;
}
.red{
background: red;
}
.col-1{
width:100%;
float:left;
}
</style>
</head>
<body>
<div id="line">
<a id="line1" href="javascript:void(0)" class="btn bg-deb">line1</a>
<a id="line2" href="javascript:void(0)" class="btn">line2</a>
</div><br />
<br />
<div id="line-test">
<div class="col-1" id="test1">
<div id="line-id-1">111111</div>
<div id="line-id-2">222222</div>
<div id="line-id-3">333333</div>
<div id="line-id-4">444444</div>
<div id="line-id-5">555555</div>
<div id="line-id-6">666666</div>
<div id="line-id-7">777777</div>
<div id="line-id-8">888888</div>
</div>
<div id="test2"></div>
</div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("#line1").click(function(){
$(".col-1").css('width','100%');
$("#test2").removeClass("col-1");
$("#test2").children().appendTo($("#test1"));
$(this).addClass("bg-deb");
$("#line2").removeClass("bg-deb");
})
$("#line2").click(function(){
$("#line-test").children().addClass("col-1");
$(".col-1").css('width','50%');
$("#test1 div:odd").prependTo($("#test2"));
$(this).addClass("bg-deb");
$("#line1").removeClass("bg-deb");
})
</script>
</body>
</html>
我点击line2按钮的时候可以点击好几次,点击一次就把line1中的数据转移一次,我想只能转移一次而不是无限转换。

控制prependTo()方法只执行一次的方法是调用前增加一个flag,设为false,调用后设置为true。后续检测flag,如果是true就return。
比如:
var flag = false;

$("#line2").click(function(){

if($(this).hasClass("bg-deb")){

return false;

}

$("#line-test").children().addClass("col-1");

$(".col-1").css('width','50%');
if(!flag){
$("#test1 div:odd").prependTo($("#test2"));
}

flag = true;

$(this).addClass("bg-deb");

$("#line1").removeClass("bg-deb");

})
jquery中,prependTo. 将元素添加到别的元素中作为头部子节点 ... 只执行一次的事件响应函数。
温馨提示:内容为网友见解,仅供参考
第1个回答  推荐于2016-01-23
$("#line2").click(function(){
if($(this).hasClass("bg-deb")){
    return false;
}
   $("#line-test").children().addClass("col-1");
   $(".col-1").css('width','50%');
   $("#test1 div:odd").prependTo($("#test2"));
   $(this).addClass("bg-deb");
   $("#line1").removeClass("bg-deb");
})

你初学者吧?代码写得有点繁琐,虽然能实现你的效果,但是可以考虑优化的。

追问

嗯 我连初学者都算不上 自己瞎研究的。。。解决了 谢谢了

追答

line1按钮也会有你说的这种情况,适当改下吧。

本回答被提问者采纳

jquery中prependTo()方法怎么让它只执行一次
控制prependTo()方法只执行一次的方法是调用前增加一个flag,设为false,调用后设置为true。后续检测flag,如果是true就return。比如:var flag = false;("#line2").click(function(){ if($(this).hasClass("bg-deb")){ return false;} ("#line-test").children().addClass("col-1");("....

jquery 滚动的问题 一次滚五个 向右为什么不顺畅,加上自动5s滚一次
1)先移动一个 li 的长度;2)把最前面的 li 插入到最后面去。(这样你可以看到移动的时候,最后面是空白的,快停止的时候,才突然出现最后一个。)3)left置0;这样的逻辑情况下,如果直接移动的长度太长,(如3个),那么可以立马看到后面空出一大块了,然后突然闪动,(因为left为0了。)上面...

《jQuery》复习总汇(填空题篇)
1. jQuery中判断某个类是否存在的方法是hasClass()。2. jQuery中用于操作元素内容的方法有html()和val()。3. p元素调用jQuery提供的replaceWith();方法可替换成span元素。4. 使用remove()方法可以删除jQuery中的DOM节点。5. ul元素调用jQuery提供的prepend()方法,可将li元素作为ul的第一个子元素插...

jquery文档处理方法
1、append()方法,向每个匹配的元素内部末尾追加内容。语法:【$('').append('');】。2、相当于js中的appendChild()方法。3、appendTo()方法作用与append()方法作用相同。语法:【$('').appendTo($(''));】。4、prepend()方法,向每个匹配的元素内部前置内容。语法:...

Jquery中的append跟prepend,after和before的区别
appendTo()——其方法是将jquery对象添加到appendTo指定的参数中去。如:A.appendTo(B)的意思是将A放到B中去,后面追加,B的子元素的最后一个位置;四、prepend()和prependTo()方法的区别 append()——其方法是将方法里面的参数添加到jquery对象中来;如:A.append(B)的意思是将B放到A中来,插入...

Jquery中的append跟prepend,after和before的区别
如$("ul").prepend("插入的元素4");结构会变成: 插入的元素4 元素1 元素2 元素3③after是插入到所选元素的最后面(紧挨着被选元素)。如$("ul").after("新盒子");结构会变成: 元素1 元素2 元素3新盒子④before是插入到所选元素的前面(紧挨着被选元素)。如$("ul"...

appendTo 不执行js文件
实际上,append(content)向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。appendTo(content)把所有匹配的元素追加到另一个、指定的元素元素集合中。实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加...

求 网页每刷新一次 图片排序随机更改 js代码
\/> 则,用jq可以如下实现 (document).ready(function(){ ("div img").each(function(){ if(parseInt(Math.random()*2)==0)(this).prependTo($(this).parent());});});这只是抛砖,你可以自己想想具体怎么去实现随即排序的问题。

用jquery的.each将数组循环出来放入html的div里改怎么写?
你定义是js方法 为啥用jquery each循环呢 你直接用for循环就是了 循环依据是arr的下标 然后吧值拼接一下用 以下都行 ("#thecity").text()("#thecity").html()append(content | fn)appendTo(content)prepend(content | fn)prependTo(content)外部插入 after(content | fn)before(content | fn)...

JQuery 加载效果提示,意思就是加载东西多的情况下,出现请等待,请稍后...
你可以用 Jquery Ajax全局事件 给你通通发一份吧 ajaxComplete(callback) ajax请求完成时执行 ajaxError(callback) ajax发生错误时执行 ajaxSend(callback) ajax发送前执行 ajaxsuccess(callback) ajax请求成功执行 请求成功的时候 隐藏提示信息 ajaxStart(callback) ajax开始请求时执行 你可以在界面弄一...

相似回答