javascript - 如何使用 jquery 添加/删除图像？

Question

我正在尝试根据 div 是否锁定或解锁来添加和删除包含在 div 中的图像。任何解锁的 div 都将被清空，并相应地添加一个新图像。

function dieClicked(){
    console.log(this); 
    if (this.locked == true){
        this.locked = !this.locked;
        $(this).css("border-bottom", "none");
    }
    else{
        this.locked = !this.locked;
        $(".pics").each(function(){
            if (this.locked == true){
                $(this).css("border-bottom", "solid red 5px");
            }
        });
    }
}


function swapUnlocked(){ 
    $(".pics").each(function(){
        if (this.locked == false){
            $(this).empty();
            $(this).append("<img src='style/images/dice.png'/>")
        }
    });
}

这两个函数的主要调用如下:

$("#newRoll").on("click", swapUnlocked);
$(".pics").on("click",dieClicked);

newRoll 是按钮的 id，而 .pics 是所有 div 所属的类。单击 .pics 类中的 div 后，将出现红色边框并且 div 将被锁定。如果再次单击同一个 div，边框就会消失，并且现在已解锁。

执行此代码时，图像将在锁定时按预期切换，然后通过 dieClicked 函数解锁。但是，当部分或全部 div 未被单击(它们未被锁定或解锁)时，这些图像不会切换，即。他们被视为被锁定了。如何让没有被点击的图片被视为解锁？

Answer 1

需要初始化锁值:

$(".pics").on("click",dieClicked).each(function() { this.locked = false; });

---

预计到达时间:您是否考虑过使用 CSS？您可以稍微简化您的代码，这也有助于保持您的样式集中:

CSS

.locked { border-bottom: solid red 5px; }

JS

function dieClicked(){
    $(this).toggleClass("locked");
}


function swapUnlocked(){ 
    $(".pics:not(.locked)").each(function(){
        $(this).empty();
        $(this).append("<img src='style/images/dice.png'/>");
    });
}