Question

嗨，有人可以帮助我，我有两个功能：

$(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()); 
        }
    }
}

这是第一个，第二个功能是：

$(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()); 
        }
    }
}

有人可以帮助我如何从这两个中创建一个函数有没有办法减少这个代码，因为每次我需要nestable来添加另一个函数时它看起来不会很好看。？

Answer 1

解决方案是将selector传递给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()); 
        }
    }
}

Answer 2

由于唯一的区别似乎是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...
}

Answer 3

好吧，sizeNestable和sizeNestable2做的一切都是一样的。唯一的区别是，第一个定位是#nestable1和#nestable2，而第二个定位是#nestable3和#nestable4。

您只需向函数添加两个参数，然后使用这些参数设置n。

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');

Answer 4

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

<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" >

并在您的javascript中

    $('.nestable').change(function() {
        var $number = jQuery(this).find('.dd3-handle').height('100%'); 
        var $number2 = jQuery(jQuery(this).data('target')).find('.dd3-handle').height('100%');
 //other code here
    });

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

4 个答案: