Question

我正在为jquery中的图像翻转游戏编写代码，但我在开始时遇到了图像上的点击事件的一些问题。问题是，当我单击一个图像并再次单击相同的图像时它工作正常但如果我单击一个图像，图像src属性将添加到img标记然后如果我单击任何其他图像src属性不会添加到该图像一次用于第一次单击，因为clickCounter的值为1。我使用了自己的逻辑（clickCounter）。我是jquery的新手。你可以建议一个更好的方法来做到这一点。提前致谢。这是我的代码。

    <style>
        #main{
            height: 500px;
            border: 1px solid blue;
            margin: auto;
        }
        .myimg{
            width: 100px;
            height: 100px;
            background: lightblue;
            background-position: center center;
            margin: 10px;
            float: left;
            border-radius: 20px;
        }
    </style>

<body>
    <div id="main">

    </div>
    <button id="add">Add</button>

    <script src="jquery-1.11.2.js"></script>
    <script>
        var clickCounter = 0;
        $('#add').click(function(){
            addElements(44);
            $('#add').attr('disabled', 'true');
        });
        function addElements(times){
            var main = $('#main');
            for(j = 1; j <= times; j++){
                var i = document.createElement('img');
                var img = $(i);
                img.click(function(){
                    // $(this).css('background', 'url(back.png)');
                    var myImage = $(this);
                    if(clickCounter == 0){
                        myImage.attr('src', 'back.png');
                        myImage.attr('width', '100');
                        myImage.attr('height', '100');
                        clickCounter = 1;
                    }else{
                        myImage.removeAttr('src');
                        clickCounter = 0;
                    }
                    //alert(clickCounter);
                });
                img.addClass('myimg');
                main.append(img);   
            }       
        }

    </script>
</body>

JSFiddle

Answer 1

问题是共享变量clickCounter，它在所有元素之间共享。

在这种情况下，由于您有动态元素，因此可以使用event delegation，然后使用src的当前img值来设置新的

$('#add').click(function () {
    addElements(44);
    $('#add').prop('disabled', true);
});

$('#main').on('click', '.myimg', function () {
    $(this).attr('src', function (i, src) {
        return src == 'back.png' ? '' : 'back.png';
    }).height(100).width(100);
})

function addElements(times) {
    var $main = $('#main');
    for (j = 1; j <= times; j++) {
        $('<img />', {
            'class': 'myimg'
        }).appendTo($main)
    }
}

演示：Fiddle

Answer 2

而不是计数器，检查'src'属性，如下所示，

        $('#add').click(function(){
            addElements(44);
            $('#add').attr('disabled', 'true');
        });
        function addElements(times){
            var main = $('#main');
            for(j = 1; j <= times; j++){
                var i = document.createElement('img');
                var img = $(i);
                img.click(function(){
                    // $(this).css('background', 'url(back.png)');
                    var myImage = $(this);
                  var attr = $(this).attr('src');
                    if(typeof attr == typeof undefined){
                        myImage.attr('src', 'back.png');
                        myImage.attr('width', '100');
                        myImage.attr('height', '100');                          
                    }else{
                        myImage.removeAttr('src');
                        
                    }
                    //alert(clickCounter);
                });
                img.addClass('myimg');
                main.append(img);   
            }       
        }

#main{
            height: 500px;
            border: 1px solid blue;
            margin: auto;
        }
        .myimg{
            width: 100px;
            height: 100px;
            background: lightblue;
            background-position: center center;
            margin: 10px;
            float: left;
            border-radius: 20px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">

    </div>
    <button id="add">Add</button>

JQuery的。遇到点击事件的问题

2 个答案: