Question

我不得不为每个元素复制代码。这是一个例子，在输入按下时说如果输入元素有一个左边距，然后移动第一个输入并显示第二个[.next（）] ..然后显示第三个/第四个等那里 - 有不必要的重复代码。

var input1 = $(".input-one");
var input2 = $(".input-two");

$(document).keypress(function(e) {
    if(e.which == 13) { // on enter press
        if ($(input1).css("margin-left") === "-232px") { // if input has this margin
            $(input1).css({"margin-left":"-1200px","opacity":"0"}); // move input left and fade out                 
            $(input1).next().css({"display":"block"}); // show next input
            setTimeout(function() {
                $(input1).next().css({"margin-left":"-232px","opacity":"1"}); // animate next input in
            }, 40);
            setTimeout(function() {
                $(input1).next().focus() // focus next input
                $(input1).css({"display":"none"}); // hides first input after fade out
            }, 600);
        }
        if ($(input2).css("margin-left") === "-232px") {
            // DUPLICATE CODE WOULD BE HERE
        }
    }
});

我试过了：

var input1 = $("#input-container").children();

但这会对输入印刷机上的所有子项应用css属性，这是不需要的。我需要这样的东西：

if ($(input1).css("margin-left") === "-232px") { // if input has this margin
    $(this input1).css({"margin-left":"-1200px","opacity":"0"}); // affect only the initial if input NOT all of the children

但那是我的知识结束的地方。我想不重复代码并将其写入每个输入更改的工作，影响当前输入的-232px margin-left。

希望这是有道理的，并提前多多谢谢

Answer 1

将它们全部存储在一个jQuery对象中，然后使用.each()依次将逻辑应用于每个对象：

var elements = $('#input-container').children();

$(document).keypress(function(e) {
    if(e.which == 13) { // on enter press
        elements.each(function() {
            var $input = $(this); // the specific element for this iteration
            if ($input.css("margin-left") === "-232px") { // if input has this margin
                $input.css({"margin-left":"-1200px","opacity":"0"}); // move input left and fade out                 
                $input.next().css({"display":"block"}); // show next input
                setTimeout(function() {
                    $input.next().css({"margin-left":"-232px","opacity":"1"}); // animate next input in
                }, 40);
                setTimeout(function() {
                    $input.next().focus() // focus next input
                    $input.css({"display":"none"}); // hides first input after fade out
                }, 600);
            }
        });
    }
});

如何编写简短的非元素特定的jquery？重复的代码头痛

1 个答案: