jQuery UI的滑块克隆问题 [英] jquery ui slider cloning issue
本文介绍了jQuery UI的滑块克隆问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个主分区和内该div有一些其他元素，包括sliderdiv的。我试图克隆时代的主分区N多。除了克隆滑块所有其他元素都工作正常。每次我试着滑动克隆之一，第一个滑块移动。
$（文件）。就绪（函数（）{
$（'＃滑盖）滑块（）。 $（'＃BTN'）。点击（函数（）{ //这里找到主分区的总数，克隆最后添加的格
VAR CURRENTCOUNT = $（'。repeatingSection'）的长度。
。VAR lastRepeatingGroup = $（'。repeatingSection'）最后（）;
VAR lastdivID = lastRepeatingGroup.attr（'身份证'）;
VAR cloneddiv = lastRepeatingGroup.clone（真实，真实）; //改变主分区编号
$（cloneddiv）.attr（'身份证'，lastdivID + CURRENTCOUNT）; //调用一个方法来改变所有元素的ID克隆DIV中
ChangeClonedDivWithNewID（cloneddiv，CURRENTCOUNT）;
//在结尾处添加克隆格
cloneddiv.insertAfter（lastRepeatingGroup）;
返回false;
}）; 功能CreateSlider（sliderdivID）{
$（＃+滑块）.slider（）;
} 功能ChangeClonedDivWithNewID（ELEM，计数器）{
警报（enterred到功能）;
$（ELEM）.find（[ID]）。每个（函数（）{
this.id = this.id +计数器;
VAR X = this.id;
//与滑块的DIV ID检查，然后将滑块移动到克隆的div
如果（this.id ==滑块+计数器）{
CreateSlider（this.id）;
}
}）;
}
}）;
HTML
＆LT;表ID =form1的=服务器＆GT;
＆LT; DIV CLASS =repeatingSectionID =repeatdiv＆GT;
＆LT; DIV ID =滑块级=sliderclass＆GT;
＆LT; / DIV＆GT;
＆LT; ASP：标签ID =LBL=服务器＆GT;＆LT; / ASP：标签＆gt;
＆LT; ASP：DropDownList的ID =性别类=ddgender=服务器ViewStateMode =已启用＆GT;
＆LT; ASP：ListItem的文本=值= - 1选择=真正的＆GT;＆LT; / ASP：ListItem的＆GT;
＆LT; ASP：ListItem的文本=男值=1选择=FALSE＆GT;＆LT; / ASP：ListItem的＆GT;
＆LT; ASP：ListItem的文本=女VALUE =0选定=FALSE＆GT;＆LT; / ASP：ListItem的＆GT;
＆LT; / ASP：DropDownList的＆GT;
＆LT;标签ID =添加级=添加＆GT;
新增＆LT; /标签＆gt;
＆LT;标签ID =删除级=删除＆GT;
删除＆LT; /标签＆gt;
＆LT; / DIV＆GT;
＆LT; ASP：按钮的ID =BTN文本=克隆=服务器/＆GT;
＆LT; /表及GT;
解决方案
我张贴解决我自己的问题。我找到了解决办法。
-
克隆父分区包含滑块的div等元素。
-
从克隆父分区删除滑块的div
-
新的div添加到父div来替换删除的div
这是我的工作code：
$（文件）。就绪（函数（）{
CreateSlider（滑块）;
$（'加'）。点击（函数（）{
VAR CURRENTCOUNT = $（'。repeatingSection'）的长度。
。VAR lastRepeatingGroup = $（'。repeatingSection'）最后（）;
VAR lastdivID = lastRepeatingGroup.attr（'身份证'）;
VAR cloneddiv = lastRepeatingGroup.clone（真实，真实）;//改变主分区编号
$（cloneddiv）.attr（'身份证'，lastdivID + CURRENTCOUNT）;//从克隆父分区删除分区滑块
$（cloneddiv）.find（'sliderclass。'）删除（）。
//调用一个方法来改变所有元素的ID克隆DIV中
ChangeClonedDivWithNewID（cloneddiv，CURRENTCOUNT）;//创建一个新的div并将其添加到克隆父DIV
VAR DIV = $（＆LT; DIV＆gt;中，{ID：滑块+ CURRENTCOUNT，等级：sliderclass}）;
$（cloneddiv）prePEND（DIV）;//在结尾处添加克隆格
cloneddiv.insertAfter（lastRepeatingGroup）;//将滑块移动到克隆父DIV
CreateSlider（$（DIV）.attr（'ID'））;
返回false;
}）;功能CreateSlider（sliderdivID）{
$（＃+滑块）.slider（）;
}功能ChangeClonedDivWithNewID（ELEM，计数器）{
$（ELEM）.find（[ID]）。每个（函数（）{
this.id = this.id +计数器;
VAR X = this.id;}）;}
}）;
I have a main div and inside that div there are a couple of other elements, including a sliderdiv. I am trying to clone the main div n number of times. All other elements are working fine except the cloned slider. Every time I try to slide the cloned one, the first slider moves.
$(document).ready(function () {
$('#slider').slider();
$('#btn').click(function () {
//here finding total number of main div, cloning the last added div
var currentCount = $('.repeatingSection').length;
var lastRepeatingGroup = $('.repeatingSection').last();
var lastdivID = lastRepeatingGroup.attr('id');
var cloneddiv = lastRepeatingGroup.clone(true, true);
//changing the main div id
$(cloneddiv).attr('id', lastdivID + currentCount);
//calling a method to change ID of all the elements inside the cloned div
ChangeClonedDivWithNewID(cloneddiv, currentCount);
//adding cloned div at the end
cloneddiv.insertAfter(lastRepeatingGroup);
return false;
});
function CreateSlider(sliderdivID) {
$("#" + slider).slider();
}
function ChangeClonedDivWithNewID(elem, counter) {
alert("enterred into function");
$(elem).find("[id]").each(function () {
this.id = this.id + counter;
var x = this.id;
//checking for div with slider id and then adding slider to cloned div
if (this.id == "slider" + counter) {
CreateSlider(this.id);
}
});
}
});
html
<form id="form1" runat="server">
<div class="repeatingSection" id="repeatdiv">
<div id="slider" class="sliderclass">
</div>
<asp:Label ID="lbl" runat="server"></asp:Label>
<asp:DropDownList ID="gender" class="ddgender" runat="server" ViewStateMode="Enabled">
<asp:ListItem Text="" Value="-1" Selected="true"></asp:ListItem>
<asp:ListItem Text="male" Value="1" Selected="False"></asp:ListItem>
<asp:ListItem Text="female" Value="0" Selected="False"></asp:ListItem>
</asp:DropDownList>
<label id="add" class="add">
Add New</label>
<label id="remove" class="remove">
Remove</label>
</div>
<asp:Button ID="btn" Text="clone" runat="server" />
</form>
解决方案
I am Posting a solution to my own issue. I found a way around.
Clone the parent div containing slider div and other elements.
Delete the slider div from the cloned parent div
Add new div to the parent div to replace deleted div
Here is my working code:
$(document).ready(function(){ CreateSlider("slider"); $('.add').click(function(){ var currentCount = $('.repeatingSection').length; var lastRepeatingGroup = $('.repeatingSection').last(); var lastdivID = lastRepeatingGroup.attr('id'); var cloneddiv = lastRepeatingGroup.clone(true, true); //changing the main div id $(cloneddiv).attr('id', lastdivID + currentCount); //Deleting Slider div from cloned parent div $(cloneddiv).find('.sliderclass').remove(); //calling a method to change ID of all the elements inside the cloned div ChangeClonedDivWithNewID(cloneddiv, currentCount); //Creating a new div and adding it to cloned parent div var div = $("<div>", { id: "slider"+ currentCount, class: "sliderclass" }); $(cloneddiv).prepend(div); //adding cloned div at the end cloneddiv.insertAfter(lastRepeatingGroup); //add slider to the cloned parent div CreateSlider($(div).attr('id')); return false; }); function CreateSlider(sliderdivID) { $("#" + slider).slider(); } function ChangeClonedDivWithNewID(elem, counter) { $(elem).find("[id]").each(function () { this.id = this.id + counter; var x = this.id; });} });
这篇关于jQuery UI的滑块克隆问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
