Question

我正在尝试添加和删除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'/>")
        }
    });
}

这两个函数在main中调用如下：

$("#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; });

ETA：您考虑过使用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'/>");
    });
}

Answer 2

我不确定你的意思是：

function dieClicked(){
console.log(this); 
if (this.locked == true){
    this.locked = !this.locked;
    $(this).css("border-bottom", "none");
    //$(this).remove(); //to delete
    //$(this).hide(); //to hide -> can be shown with calling .show() on object
}
else{
    this.locked = !this.locked;
    $(".pics").each(function(){
        if (this.locked == true){
            $(this).css("border-bottom", "solid red 5px");
            //$(this).show();
        }
    });
}
}
function swapUnlocked(){ 
$(".pics").each(function(){
    if (this.locked == false){
        $(this).empty();
        $(this).append("<img src='style/images/dice.png'/>");
        this.locked = true;
    }
});
}

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

2 个答案: