Javascript 如何使用for循环将此代码从两个函数缩减为一个？

嗨，有人能帮我吗？我有两个功能：

$(document).ready(function(){ 
    sizeNestable(); 
}); 

$('#nestable1, #nestable2').change(function() {
    sizeNestable();
});

function sizeNestable() {

    var n3 = $('#nestable1').find('.dd3-handle').height('100%'); 
    var n4 = $('#nestable2').find('.dd3-handle').height('100%'); 

    var smallest; 
    var largest; 

    if(n3.size() > n4.size()) { 
        largest = n3; 
        smallest = n4; 
    } else { 
        largest = n4; 
        smallest = n3; 
    } 

    for(var i = 0; i < smallest.size(); i++) { 
        if(smallest.eq(i).height()  > largest.eq(i).height()) { 
            largest.eq(i).height(smallest.eq(i).height()); 
        } else { 
            smallest.eq(i).height(largest.eq(i).height()); 
        }
    }
}

$（文档）.ready（函数（）{
sizeNestable（）；
}); 
$（'#nestable1，#nestable2'）.change（function（）{
sizeNestable（）；
});
函数表（）{
变量n3=$（'#nestable1'）。查找（'.dd3句柄'）。高度（'100%）；
变量n4=$（'#nestable2'）。查找（'.dd3句柄'）。高度（'100%）；
var最小；
var最大；
如果（n3.size（）>n4.size（））{
最大=n3；
最小=n4；
}否则{
最大=n4；
最小=n3；
} 
对于（var i=0；i<最小的.size（）；i++）{
if（最小的.eq（i）.height（）>最大的.eq（i）.height（））{
最大.eq（i）.height（最小.eq（i）.height（））；
}否则{
最小.eq（i）.height（最大.eq（i）.height（））；
}
}
}

这是第一个函数，第二个函数是：

$(document).ready(function(){ 
   sizeNestable2(); 
}); 

$('#nestable3, #nestable4').change(function() {
   sizeNestable2();
});

function sizeNestable2() {

    var n3 = $('#nestable3').find('.dd3-handle').height('100%'); 
    var n4 = $('#nestable4').find('.dd3-handle').height('100%'); 

    var smallest; 
    var largest; 

    if(n3.size() > n4.size()) { 
        largest = n3; 
        smallest = n4; 
    } else { 
        largest = n4; 
        smallest = n3; 
    } 

    for(var i = 0; i < smallest.size(); i++) { 
        if(smallest.eq(i).height()  > largest.eq(i).height()) { 
            largest.eq(i).height(smallest.eq(i).height()); 
        } else { 
            smallest.eq(i).height(largest.eq(i).height()); 
        }
    }
}

$（文档）.ready（函数（）{
表2（）；
}); 
$（'#nestable3，#nestable4'）.change（function（）{
表2（）；
});
函数表2（）{
变量n3=$（'#nestable3'）。查找（'.dd3句柄'）。高度（'100%）；
变量n4=$（'#nestable4'）。查找（'.dd3句柄'）。高度（'100%）；
var最小；
var最大；
如果（n3.size（）>n4.size（））{
最大=n3；
最小=n4；
}否则{
最大=n4；
最小=n3；
} 
对于（var i=0；i<最小的.size（）；i++）{
if（最小的.eq（i）.height（）>最大的.eq（i）.height（））{
最大.eq（i）.height（最小.eq（i）.height（））；
}否则{
最小.eq（i）.height（最大.eq（i）.height（））；
}
}
}

---

有人能帮助我如何从这两个函数中生成一个函数吗？有没有办法减少此代码，因为每次我需要nestable来添加另一个函数时，它看起来都不太好。

解决方案是将

选择器

传递到

sizeNestable

函数

以下是您要查找的内容：

$(document).ready(function(){ 
    sizeNestable('#nestable1', '#nestable2');
    sizeNestable('#nestable3', '#nestable4');
}); 

$('#nestable1, #nestable2').change(function() {
    sizeNestable('#nestable1', '#nestable2');
});
$('#nestable3, #nestable4').change(function() {
    sizeNestable('#nestable3', '#nestable4');
});

function sizeNestable(id1, id2) {

    var n3 = $(id1).find('.dd3-handle').height('100%'); 
    var n4 = $(id2).find('.dd3-handle').height('100%'); 

    var smallest; 
    var largest; 

    if(n3.size() > n4.size()) { 
        largest = n3; 
        smallest = n4; 
    } else { 
        largest = n4; 
        smallest = n3; 
    } 

    for(var i = 0; i < smallest.size(); i++) { 
        if(smallest.eq(i).height()  > largest.eq(i).height()) { 
            largest.eq(i).height(smallest.eq(i).height()); 
        } else { 
            smallest.eq(i).height(largest.eq(i).height()); 
        }
    }
}

$（文档）.ready（函数（）{
sizeNestable（“#nestable1”、“#nestable2”）；
sizeNestable（“#nestable3”，“#nestable4”）；
}); 
$（'#nestable1，#nestable2'）.change（function（）{
sizeNestable（“#nestable1”、“#nestable2”）；
});
$（'#nestable3，#nestable4'）.change（function（）{
sizeNestable（“#nestable3”，“#nestable4”）；
});
函数大小表（id1、id2）{
var n3=$（id1）.find（'.dd3 handle'）.height（'100%）；
var n4=$（id2）.find（'.dd3 handle'）.height（'100%）；
var最小；
var最大；
如果（n3.size（）>n4.size（））{
最大=n3；
最小=n4；
}否则{
最大=n4；
最小=n3；
} 
对于（var i=0；i<最小的.size（）；i++）{
if（最小的.eq（i）.height（）>最大的.eq（i）.height（））{
最大.eq（i）.height（最小.eq（i）.height（））；
}否则{
最小.eq（i）.height（最大.eq（i）.height（））；
}
}
}

解决方案是将

选择器

传递到

sizeNestable

功能

以下是您要查找的内容：

$(document).ready(function(){ 
    sizeNestable('#nestable1', '#nestable2');
    sizeNestable('#nestable3', '#nestable4');
}); 

$('#nestable1, #nestable2').change(function() {
    sizeNestable('#nestable1', '#nestable2');
});
$('#nestable3, #nestable4').change(function() {
    sizeNestable('#nestable3', '#nestable4');
});

function sizeNestable(id1, id2) {

    var n3 = $(id1).find('.dd3-handle').height('100%'); 
    var n4 = $(id2).find('.dd3-handle').height('100%'); 

    var smallest; 
    var largest; 

    if(n3.size() > n4.size()) { 
        largest = n3; 
        smallest = n4; 
    } else { 
        largest = n4; 
        smallest = n3; 
    } 

    for(var i = 0; i < smallest.size(); i++) { 
        if(smallest.eq(i).height()  > largest.eq(i).height()) { 
            largest.eq(i).height(smallest.eq(i).height()); 
        } else { 
            smallest.eq(i).height(largest.eq(i).height()); 
        }
    }
}

$（文档）.ready（函数（）{
sizeNestable（“#nestable1”、“#nestable2”）；
sizeNestable（“#nestable3”，“#nestable4”）；
}); 
$（'#nestable1，#nestable2'）.change（function（）{
sizeNestable（“#nestable1”、“#nestable2”）；
});
$（'#nestable3，#nestable4'）.change（function（）{
sizeNestable（“#nestable3”，“#nestable4”）；
});
函数大小表（id1、id2）{
var n3=$（id1）.find（'.dd3 handle'）.height（'100%）；
var n4=$（id2）.find（'.dd3 handle'）.height（'100%）；
var最小；
var最大；
如果（n3.size（）>n4.size（））{
最大=n3；
最小=n4；
}否则{
最大=n4；
最小=n3；
} 
对于（var i=0；i<最小的.size（）；i++）{
if（最小的.eq（i）.height（）>最大的.eq（i）.height（））{
最大.eq（i）.height（最小.eq（i）.height（））；
}否则{
最小.eq（i）.height（最大.eq（i）.height（））；
}
}
}

由于唯一的区别似乎是对

n3

和

n4

的赋值，您只需将两个变量传递给通用

sizeNestable

函数即可正确设置它们

$(document).ready(function(){ 
    sizeNestable('nestable1', 'nestable2');
    sizeNestable('nestable3', 'nestable4');
}); 

$('#nestable1, #nestable2').change(function() {
    sizeNestable('nestable1', 'nestable2');
});

$('#nestable3, #nestable4').change(function() {
    sizeNestable('nestable3', 'nestable4');
});

function sizeNestable(container1, container2) {
    var n3 = $('#' + container1).find('.dd3-handle').height('100%'); 
    var n4 = $('#' + container2).find('.dd3-handle').height('100%'); 

    // rest of your function stays the same...
}

---

由于唯一的区别似乎是

n3

和

n4

的赋值，您只需将两个变量传递给通用

sizeNestable

函数即可正确设置它们

$(document).ready(function(){ 
    sizeNestable('nestable1', 'nestable2');
    sizeNestable('nestable3', 'nestable4');
}); 

$('#nestable1, #nestable2').change(function() {
    sizeNestable('nestable1', 'nestable2');
});

$('#nestable3, #nestable4').change(function() {
    sizeNestable('nestable3', 'nestable4');
});

function sizeNestable(container1, container2) {
    var n3 = $('#' + container1).find('.dd3-handle').height('100%'); 
    var n4 = $('#' + container2).find('.dd3-handle').height('100%'); 

    // rest of your function stays the same...
}

---

嗯，

sizeNestable

和

sizeNestable2

做的都一样。唯一的区别是第一个目标是

#nestable1

和

#nestable2

，而第二个目标是

#nestable3

和

#nestable4

您只需向函数中添加两个参数，并使用这些参数设置

n

s

function sizeNestable(nestable1, nestable2) {
  const n1 = $(nestable1).find('.dd3-handle').height('100%');
  const n2 = $(nestable2).find('.dd3-handle').height('100%');

  ...
}

sizeNestable('#nestable1', '#nestable2');
sizeNestable('#nestable3', '#nestable4');

---

嗯，

sizeNestable

和

sizeNestable2

做的都一样。唯一的区别是第一个目标是

#nestable1

和

#nestable2

，而第二个目标是

#nestable3

和

#nestable4

您只需向函数中添加两个参数，并使用这些参数设置

n

s

function sizeNestable(nestable1, nestable2) {
  const n1 = $(nestable1).find('.dd3-handle').height('100%');
  const n2 = $(nestable2).find('.dd3-handle').height('100%');

  ...
}

sizeNestable('#nestable1', '#nestable2');
sizeNestable('#nestable3', '#nestable4');

---

我想你最好像这样编辑选择器

<input class="nestable" id="nestable1" data-target="#nestable2" >
<input class="nestable" id="nestable2" data-target="#nestable1" >
<input class="nestable" id="nestable3" data-target="#nestable4" >
<input class="nestable" id="nestable4" data-target="#nestable3" >

---

我想你最好像这样编辑选择器

<input class="nestable" id="nestable1" data-target="#nestable2" >
<input class="nestable" id="nestable2" data-target="#nestable1" >
<input class="nestable" id="nestable3" data-target="#nestable4" >
<input class="nestable" id="nestable4" data-target="#nestable3" >