javascript - 无法通过单击功能访问 来更改其 src

Question

我必须在“生命游戏”中执行一个功能，该功能将根据单元格之前的状态在点击时将其更改为活或死。看起来很简单，也可能确实如此，但有时您会陷入困境，无论出于何种原因，您都找不到简单的解决方案。

主要问题是我无法仅访问一次单击的 img 并且 click() 函数仅适用于区域 div ( /image/2pWSL.jpg )。

显然我已经在互联网上搜索并尝试了许多不同版本的代码，但没有任何效果。

$(document).ready(function(){
        simulatorInit();
        $("#area").click(function()
    {
        alert("dasd");

    });
});

这就是我现在所拥有的，当我点击“board”时它会发出警报，但我不知道如何访问特定的“clicked”img。

尝试了类似的方法，但它也不起作用:

$(this).click(function()
    {
        if($("div").attr('src','dead.gif')) $(this).attr('src','alive.gif')

    });
});

编辑::html代码:

    <div id="areaWrapper">
        <div id="area" class="ui-corner-all">
            Aby rozpocząć wygeneruj plansze
        </div>
    </div>
    <!-- Okienko panelu kontrolnego -->
    <div id="controls">
        <label for="area-x">Szerokość</label>
        <input id="area-x" value="10" type="number" min="3" /><br/>
        <label for="area-y">Wysokość</label>
        <input id="area-y" value="10" type="number" min="3" /><br/>
        <button id="generate-area-button">Generuj plansze</button>
        <hr/>
        <label for="live-prob">Szansa na losowe życie</label>
        <input id="live-prob" value="0.4" type="number" min="0.01" max="1" step="0.01" /><br/>
        <button id="random-area-button">Losuj</button>
        <hr/>
        <label for="speed">Szybkość w ms</label>
        <input id="speed" value="600" type="number" min="40" step="10" /><br/>
    </div>
    <!-- Pasek narzędziowy -->
    <div id="bar" class="ui-widget ui-widget-content ui-corner-all">
        Krok:<span id="step">0</span>
        <button id="play-pause-button">Zatrzymaj/Wznów</button>
        <button id="show-panel-button">Pokaż panel</button>
    </div>

并生成细胞:

function generateArea(){
                var x = parseInt($("#area-x").val());
                var y = parseInt($("#area-y").val());
                $('#area').html('');
                for(var i=0;i<y;i++){
                    for(var j=0;j<x;j++){
                        var img=$("<img />");
                        img.attr("src",dead);
                        img.attr("cell-x",j);
                        img.attr("cell-y",i);
                        img.addClass("cell");
                        $('#area').append(img);
                    }
                    $('#area').append($('<br/>'));
                }
            }

Answer 1

您没有将点击处理程序绑定(bind)到图像，仅绑定(bind)到父级 <div> .

还有if($("div").attr('src','dead.gif'))没有按照你的想法去做。它实际上是将属性设置为 dead.gif每一次。它应该更像 if($("div").attr('src') === 'dead.gif'))

尝试

$('#area img').click(function(){
    $(this).attr('src', function(i, existingSrc){
       return existingSrc === 'dead.gif' ? 'alive.gif' : 'dead.gif';
    });
});