第一次点击时追加,第二次点击时分离
Append on first click and detach on second button click
我有这个 Jquery 函数,在单击第一个按钮时分离 #mainFTL,在第二次单击时附加它,但我希望该函数执行相反的操作。首先单击附加,然后单击分离。谢谢
<button type="button" name="mainFTLbutton" id="mainFTLbutton" class="btn btn-success btn-block">FTL - Full Truckload</button>
$(document).ready(function() {
var p;
$('#mainFTLbutton').click(function() {
$('#mainFTL').show();
if (p) {
p.appendTo('.appendFTL');
p = null;
} else {
p = $('#mainFTL').detach();
}
});
});
然后查找元素并设置变量。
var p = $('#mainFTL').detach();
然后 p 将在第一次点击时存在,并附加它。
试试这个:
$(document).ready(function() {
// cache your selectors
var main = $('#mainFTL'),
btn = $('#mainFTLbutton');
btn.click(function(){
// check if the element is visible (it will only be visible when appended)
if(main.is(':visible')){
main.detach();
}else{
main.appendTo('.appendFTL').show();
}
});
});
#mainFTL {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainFTL">Hello</div>
<div class="appendFTL"></div>
<button type="button" name="mainFTLbutton" id="mainFTLbutton" class="btn btn-success btn-block">FTL - Full Truckload</button>
我有这个 Jquery 函数,在单击第一个按钮时分离 #mainFTL,在第二次单击时附加它,但我希望该函数执行相反的操作。首先单击附加,然后单击分离。谢谢
<button type="button" name="mainFTLbutton" id="mainFTLbutton" class="btn btn-success btn-block">FTL - Full Truckload</button>
$(document).ready(function() {
var p;
$('#mainFTLbutton').click(function() {
$('#mainFTL').show();
if (p) {
p.appendTo('.appendFTL');
p = null;
} else {
p = $('#mainFTL').detach();
}
});
});
然后查找元素并设置变量。
var p = $('#mainFTL').detach();
然后 p 将在第一次点击时存在,并附加它。
试试这个:
$(document).ready(function() {
// cache your selectors
var main = $('#mainFTL'),
btn = $('#mainFTLbutton');
btn.click(function(){
// check if the element is visible (it will only be visible when appended)
if(main.is(':visible')){
main.detach();
}else{
main.appendTo('.appendFTL').show();
}
});
});
#mainFTL {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainFTL">Hello</div>
<div class="appendFTL"></div>
<button type="button" name="mainFTLbutton" id="mainFTLbutton" class="btn btn-success btn-block">FTL - Full Truckload</button>