代码之家 › 专栏 › 技术社区 › Tsuna

嵌套onclick函数启用和禁用-jquery

nested onclick html jquery

Tsuna · 技术社区 · 11 年前

我有这三个Div,我试图让其中至少两个先工作。所有div从一开始就被禁用。如果单击第一个div,则该div将启用所有输入,依此类推。如果未启用1st div,则无法启用第2和第3个div。如果单击1st div启用它,则可以启用或禁用第二个div。如果1st和2nd div都被启用,那么单击1st div将禁用它,那么第二个div也将被禁用。

现在我所能做的是,如果我启用了第一个div,我就可以启用第二个div,但如果我禁用了第一个div,第二个div仍然可以自己启用/禁用,但我希望的是,没有启用第一个div。

人们能帮我看看我应该在代码中做些什么才能让它正常工作吗?

$(twoSides).on('click', function(e){
    e.preventDefault();
    var disabledAttr = $(twoSides).attr('disabled');

    if(disabledAttr == 'disabled'){
        enableSides(twoSides,dimensionSideB,colorSideB,mountSideB);

        // if three sides is clicked
        $(threeSides).on('click', function(e){
            e.preventDefault();
            var disabledAttr = $(threeSides).attr('disabled');

            if(disabledAttr == 'disabled'){
                enableSides(threeSides,dimensionSideC,colorSideC,mountSideC);
                console.log(disabledAttr);
                console.log('three enabled');
            }else{
                disableSides(threeSides,dimensionSideC,colorSideC,mountSideC);
                console.log(disabledAttr);
                console.log('three disabled');
            }
        });
    }else{
        disableSides(twoSides,dimensionSideB,colorSideB,mountSideB);
        disableSides(threeSides,dimensionSideC,colorSideC,mountSideC);
    }
});

谢谢,提前谢谢。

编辑对不起,我漏掉了最重要的部分。除了div之外,div还有其他不是子级的div。它们可能是同一列中的兄弟或更深层的div,当单击div1时,将启用/禁用同一列

1 回复 | 直到 11 年前

Joshua K 11 年前

// deactivate all items at the beginning
$('.pages > div.page').attr('disabled',true);

// if one element is clicked...
$('.pages > div.page').click(function() {
    // get the index of the clicked element within the collection:
    var idx = $('.pages > div.page').index(this);
    // if the clicked element is enabled...
    if(!$(this).attr('disabled'))
        // ... select the clicked element and all its followed siblings and disable it. (the return stops the execution of this function. you can also use else {} instead of returning at this point)
        return $('.pages > div.page').slice(idx).attr('disabled',true);
    // check if it's the first element or all previous siblings are already enabled
    var allBeforeAreEnabled = idx===0 || $('.pages > div.page')
        .slice(0,idx) // select only the elements 0 till the clicked one
        .get() // convert the collection to an javascript array
        .reduce(function(previousValue, currentValue) {
            return previousValue && $(currentValue).attr('disabled')!=='disabled';
        }, true);
    // if all were enabled...
    if(allBeforeAreEnabled)
        // enable the clicked element
        $(this).removeAttr('disabled');
});

在行动中看到它: http://jsfiddle.net/7b9eh573/

更新您也可以使用 Array.prototype.every() 。它稍微简化了代码,使这一步骤比使用reduce更清晰。