Question

我创建了一个网格容器，其中包含具有按钮类的图像。我想做的是当我选择或单击一个按钮而其他按钮都被禁用时。我已经研究了如何进行此操作，到目前为止，我找到了以下代码：

var button = document.querySelectorAll('img[class=button]');

var element = document.querySelectorAll（'akuma'）;

for（var i = 0; i

if(button[i].id === element.id){
    hypeDocument.getElementById(button[i].id).style.pointerEvents = "auto";
} else {
    button[i].style.pointerEvents = "none";
}

} ：上面的代码使所有按钮变为禁用。我想在禁用其他按钮时选择一个按钮。有没有一种方法可以使用此代码并修改我要执行的操作。我觉得我已经接近了，但我错过了一些东西。救命！这是我的HTML网格容器：

<div class="grid-container">
        <img id="akuma" class="button" src="images\akuma\kisspng-street-fighter-iii-3rd-strike-street-fighter-iv-s-fighting-5abdb9e5139527.5518646515223833330802.png">

        <img id="balrog" class="button" src="images\balrog\balrog.png">

        <img id="bison" class="button" src="images\bison\kisspng-street-fighter-iv-m-bison-street-fighter-ii-the-bison-5b24fe75c93b28.2342175015291510938243.png"
            alt="Bison">

        <img id="blanka" class="button" src="images\blanka\kisspng-super-street-fighter-iv-street-fighter-ii-the-wor-street-fighter-5ac0d9aaa7f3e6.7706622915225880746879.png"
            alt="Blanka">

        <img id="cammy" class="button" src="images\cammy\Cammy.png" alt="Cammy">

        <img id="chun-li" class="button" src="images\chun li\kisspng-chun-li-m-bison-street-fighter-iii-3rd-strike-st-street-fighter-5ad35f53b89034.005454221523801939756.png"
            alt="Chun Li">

        <img id="dhalism" class="button" src="images\dhalism\dhalism.png" alt="Dhalism">

        <img id="fei-long" class="button" src="images\fei long\kisspng-street-fighter-iv-fei-long-ryu-street-fighter-ii-fei-long-5b2780867c7413.7567698315293154625098.png"
            alt="Fei Long">

        <img id="guile" class="button" src="images\guile\guile_new_clothes_by_groxkof-dc4jkc4.png" alt="Guile">

        <img id="honda" class="button" src="images\honda\1419.png" alt="Honda">

        <img id="ibuki" class="button" src="images\ibuki\kisspng-street-fighter-iii-3rd-strike-street-fighter-iv-s-street-fight-5b1654057521d0.7573768215281899574798.png"
            alt="Ibuki">

        <img id="ken" class="button" src="images\ken\Street_Fighter_-_Ken_Masters_as_he_appears_in_Street_Fighter_III_Third_Strike_Online_Edition.png"
            alt="Ken Masters">

        <img id="makoto" class="button" src="images\makoto\kisspng-street-fighter-iii-3rd-strike-super-street-fighte-cartoon-karate-kid-5a70ca9b754a75.9482296715173413394804.png"
            alt="Makoto">

        <img id="ryu" class="button" src="images\ryu\Ryu_render_by_kid356.png" alt="Ryu">

        <img id="sagat" class="button" src="images\sagat\Sagat.png" alt="Sagat">

        <img id="thawk" class="button" src="images\t. hawk\T._Hawk.png" alt="Thawkart">

        <img id="zangief" class="button" src="images\zangief\Zangief_Real.png" alt="Vega">

        <img id="skull" class="button" src="images\ex\Skullomania_SNK_Heroines.png" alt="Skullomania_SNK_Heroines">

        <img id="alex" class="button" src="images\alex\Alex_(Street-Fighter).png" alt="Alex">

        <img id="oro" class="button" src="images\oro\012b17bb420ec39cec359043f6663e32.png" alt="Oro">

        <img id="deejay" class="button" src="images\deejay\4577ddcabe90881ec6dbafd6c2ff7b36-db0yjor.png" alt="Deejay">

        <img id="dudley" class="button" src="images\Dudley\842a7094a72e5d9bebd483e9e4019385.png" alt="Dudley">

        <img id="yang" class="button" src="images\yang\kisspng-street-fighter-iii-3rd-strike-super-street-fighte-street-fighter-5ab9549a256114.9478212115220952581531.png"
            alt="yang">

        <img id="yun" class="button" src="images\yun\street_fighter_iii_3rd_strike_yun_by_hes6789-d8zgjp3.png" alt="Yun">

        <img type="image" id="guy" class="button" src="images\guy\2175287-guy.png" alt="Guy">
    </div>

Answer 1

这应该有效！

var button = document.querySelectorAll('img.button');

for(var i=0; i < button.length; i++){
    button[i].addEventListener('click', function(e){
        var otherButtons = document.querySelectorAll('img.button:not(#'+e.target.getAttribute('id')+')')
        for( var j = 0; j < otherButtons.length; j++ ){
            otherButtons[j].style.pointerEvents = 'none';
        }
});

在网格容器内部禁用图像按钮

1 个答案: