Question

我必须在“生活游戏”中执行一项功能，该功能将根据其以前的状态将单元格更改为单击时变为活动状态或死亡状态。似乎很简单，可能很简单，但有时您会陷入困境，无论出于何种原因，您都找不到这种简单的解决方案。

主要问题是我只能访问一个单击的img，而click()功能仅适用于区域div（https://imgur.com/a/k7iY7OV）。

很明显，我已经在互联网上搜索并尝试了许多不同版本的代码，但是没有任何作用。

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

    });
});

这就是我现在拥有的内容，当我单击“面板”时它会发出警报，但我不知道如何访问特定的“单击”的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

您没有将点击处理程序绑定到图像，而仅绑定到父<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';
    });
});

Answer 2

event.target具有特定的img信息。请参考jQuery API页面：https://api.jquery.com/event.target/

无法通过点击功能访问<img/>来更改其src

2 个答案: