Question

现在工作（更多）Prooertly

我得到了这个简化的＆＃39;魔方＆＃39;这里对图像的影响 -

<a href="http://codepen.io/Nirsgv/pen/JYmrMK">codepen here</a>

必须重复九次这个功能，并思考如何有效地包装程序的功能。非常感谢任何建议。

Answer 1

您只需使用以下内容替换JavaScript：

for (var i = 1; i <= 9; i++)
{
    document.getElementById("mainImage" + i).onclick = changeImage;
}

function changeImage()
{
    this.setAttribute("class", "back" + (Math.floor(Math.random() * 9) + 1));
}

或jQuery中的几乎一行：

$(".cont image").click(function() {
    $(this).attr("class", "back" + (Math.floor(Math.random() * 9) + 1));
});

我的解决方案不是那么普遍 - 例如，如果你想要16个单元而不是9个或者重命名你的ID \类，你需要更改这个代码。但是，它是最短的一个：）

实际上，您不需要知道当前单元格的id来更改图像。
如果您出于某种原因希望在id内获得changeImage，可以使用substr从元素ID中提取function changeImage() { var id = this.id.substr(9); console.log(id + " is clicked."); this.setAttribute("class", "back" + (Math.floor(Math.random() * 9) + 1)); }：

mainImage1

由于我们的ID看起来像mainImage2，mainImage9 ... id，因此您只需使用this.id.substr(9)即可提取index。 substr(index) 方法只是从theatrics位置开始获取字符串的子字符串。

以下是working JSFiddle demo

Answer 2

如果我理解你的问题是正确的，你可以这样做：

var images = document.querySelectorAll(".cont img");
for(var i in images){

    images[i].addEventListener("click", function(e){
        console.log(i, classArray[i]);
        e.target.setAttribute("class", classArray[i]);
        i = Math.floor((Math.random() * 9));
        console.log(classArray[i])
    });
}

Answer 3

我理解你的问题＆＃34;如何有效地包装程序的功能＆＃34;意思是，你应该如何封装你的数据和行为？

查看您提供的代码，我构建了类似下面的代码......

var MyApp = (function(){

    var _classArray = ["back1", "back2", "back3", "back4", "back5", "back6", "back7", "back8", "back9"];
    var _images = [

        document.getElementById("mainImage1"),
        document.getElementById("mainImage2"),
        document.getElementById("mainImage3"),
        document.getElementById("mainImage4"),
        document.getElementById("mainImage5"),
        document.getElementById("mainImage6"),
        document.getElementById("mainImage7"),
        document.getElementById("mainImage8"),
        document.getElementById("mainImage9")
    ];

    function _init()
    {

        _bindToUIEvents();
    }

    function _bindToUIEvents()
    {
        for(var i=0; i < _images.size; i++)
        {
            _images.onclick = function () 
            {
                console.log(i, _classArray[i]);
                _images[i].setAttribute("class", _classArray[i]);

                i = Math.floor((Math.random() * 9));

                console.log(_classArray[i])
            };
        }
    }

    return {

        init: _init()

    };

})();

$(document).ready(function(){
   MyApp.init;
});

我如何将其作为一个函数包装而不是重复九次？

3 个答案: