javascript - 使用 javascript/jquery 闭包在 ul >li 层次结构中级联值

Question

我有 ul > li > ul > li 层次结构。每个 li 都有与之关联的输入文本框。我想将 onchange 事件处理程序附加到每个输入元素，以便在更改该元素时所有后续子输入元素也继承此值。我想为每个元素在最里面的 .bind 函数周围实现一个闭包，这样我就可以在运行时传入父输入值。这是如何做到最好的？

var $generatedFeatureTree = $('.generated','#feature_weights');

// Get all input text boxes in the top level div
var generatedWeights = $generatedFeatureTree.find('input[type="text"]');

for(var i =0; i< generatedWeights.length; ++i){

    var $this = $(generatedWeights[i]);
    var value = $this.val();

    $this.bind('change',function(value){
        $$this = $(this);

        // get all children input elements of this node by traversing a parent 'li'
        // and getting the lone 'ul' child
        var children = $$this.parent('li').children('ul').find('input[type="text"]');

        for(var j=0;j<children.length;++j){
            $$$this = $(children[j]);
            $$$this.val(value);
        }
    });

    }

Answer 1

也许我误解了您的需求，但我认为您的解决方案设计过度了。就不能这样吗？

var myInputs = $('input[type=text]');  //use whatever selector you need to grab ALL textboxes
myInputs.change(function() {
    $(this).siblings('ul').find('input[type=text]').val($(this).val());
});

输入的级别对您来说并不重要，您需要做的就是将低于该级别的所有输入设置为相同的值。因此，您可以将相同的更改功能附加到所有输入。我的函数只是寻找 <ul>那是输入的兄弟，找到那个 <ul> 中的所有文本框, 并将它们设置为与父文本框相同的值。我认为这就是您希望实现的目标。

这是一个现场演示:http://jsfiddle.net/Ender/wXqcE/