我有一个返回颜色数组的函数:

default: function () {

    // Get our colours array
    var colours = [service.kits.kit.colour1, service.kits.kit.colour2, service.kits.kit.colour3];

    // If our third colour is blank
    if (!colours[2]) {

        // Is our first or second colour white
        var isWhite = colours[0] === 'ffffff' || colours[1] === 'ffffff';

        // Set our thrid colour
        colours[2] = isWhite ? 'a6a6a6' : 'ffffff';
    }

    // Return our colours
    return colours;
},

然后我这样使用:

// Checks to see what colour was selected for Colour 1 and 2 and sets the 3rd colour
var setSelectedColours = function () {

    // Get our default colours
    var colours = service.colours.default();

    // Apply to our selected colours
    service.colours.selected = angular.copy(colours);
    service.colours.selectedLeisure = angular.copy(colours);
};

我有一个用于交换颜色的指令，如下所示:

.directive('colourSwapper', function () {

    return {
        restrict: 'A',
        controller: 'ColourSwapperController',
        link: function (scope, element, attrs, controller) {

            // Get to see if we are working with the leisure colours or not
            var leisurewear = attrs.hasOwnProperty('leisurewear');

            // Create our function
            element.bind('click', function (e) {

                // Apply the scope
                scope.$apply(function () {

                    // Use the algorithm for leisurwear items
                    controller.swapColours(leisurewear);
                });

                // Prevent any other actions
                e.preventDefault();
            });
        }
    };
})

到目前为止非常简单。 交换颜色的功能保存在我的 Controller 中，如下所示:

.controller('ColourSwapperController', ['ConfiguratorService', function (shared) {
    var self = this;

    // Assign our private properties
    var defaultColours = shared.colours.default(),
        tempColour,
        leisureColour = '000e31',
        leisureColours = [leisureColour, '001444'];

    // Used to swap the colours for a garment
    self.swapColours = function (leisurewear) {

        // Get our colours
        var colours = leisurewear ? shared.colours.selectedLeisure : shared.colours.selected;

        // If we are leisurewear and colour 1 and 2 are not navy and we don't have a temp colour
        if (leisurewear && leisureColours.indexOf(defaultColours[0]) === -1 && leisureColours.indexOf(defaultColours[1]) === -1 && !tempColour) {

            // Assign our first colour to our temp colour
            tempColour = colours[0];

            // Make our first colour our 
            colours[0] = leisureColour;

            // If we are playingwear or we have a tempColour
        } else {

            // If we have a tempColour
            if (tempColour) {

                // Set our first colour to our tempColour
                colours[0] = tempColour;

                // Reset our tempColour
                tempColour = null;
            }

            // If our last colour is the hightlight colour and we have not swapped, and our first colour is not the same as our second colour
            if (colours[2] === defaultColours[2] && colours[0] === defaultColours[0] && defaultColours[0] !== defaultColours[1]) {

                // Get colour 1
                var c1 = colours.shift();

                // Move it to the middle
                colours.splice(1, 0, c1);

                // If our last colour is our highlight colour and we have already swapped
            } else if (colours[2] === defaultColours[2]) {

                // Get our highlight colour
                var h1 = colours.pop();

                // Move it to the middle
                colours.splice(1, 0, h1);

                // If our highlight colour is in the middle and our first colour is actually our second colour, and we our first colour is not the same as our second colour
            } else if (colours[1] === defaultColours[2] && colours[0] === defaultColours[1] && defaultColours[0] !== defaultColours[1]) {

                // Get colour 1 and 2
                var c1 = colours.pop();
                var c2 = colours.shift();

                // Swap our colours
                colours.splice(0, 0, c1);
                colours.push(c2);

                // If our hightlight colour is in the middle and our first colour is in the original place, move our hightlight colour back to the last position
            } else if (colours[1] === defaultColours[2]) {

                // If we have a tempColour
                if (tempColour) {

                    // Set our first colour to our tempColour
                    colours[0] = tempColour;

                    // Reset our tempColour
                    tempColour = null;
                }

                // Get colour 2
                var c2 = colours.pop();

                // Insert c2 into the middel
                colours.splice(1, 0, c2);
            }
        }
    };
}])

现在，这有点复杂。有3种颜色，可以这样排列，颜色3只能在位置1和2，而颜色1和2可以在任何位置。

如果颜色用于休闲装，则应用相同的规则但在位置 0 的每个步骤之间插入另一种颜色(除非该颜色已经被选择并且位于位置 1 或 2) .

我的函数运行良好，但它是线性的，如果按下一个按钮，它将始终向一个方向移动。我“希望”它朝两个方向移动，所以有一个后退和前进按钮可以反转功能。

有谁知道如何对我当前的功能执行此操作？

最佳答案

创建一个存储颜色序列的数组

var colorsOrderSet=[];

当你点击按钮时

var colorChangeNumber = 0;

当它点击时，它应该将信息存储在一个数组中

colorsOrderSet[colorChangeNumber] = colours;

然后将它加一，这样它就会存储这个数字

colorChangeNumber++;

返回函数 将点击

ColorChangeNumber--;
colorsOrderSet[colorChangeNumber] = colours;

关于javascript - 在 angularJS 中交换颜色的可逆函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33125379/