当我在图像上使用切换脚本时，图像更改如显示/隐藏

image change like show/hide when i use a toggle script on the image

本文关键字：图像 显示 隐藏 脚本      更新时间：2023-09-26

有没有人能给我解决方案，当我点击一个像黑色x的图像，然后显示一个div，我再次点击图像后，它的变化成红色x和隐藏div使用什么方法?

$(".open").click(function(){
        if ($(this).text()=="open")
            $(this).text("close")
            else
                $(this).text("open")
                $("div").toggle(300);
    });

这是用于更改按钮上的文本和切换div如果我使用2种不同类型的图像而不是按钮，我在此代码中更改的内容

不使用按钮的.text()，而是为元素添加一个语义类:

$(".open").click(function(){
    if ($(this).is("isopen")
        $(this).removeClass("isopen").addClass("isclosed")
    else
        $(this).removeClass("isclosed").addClass("isopen")
    $("#mydiv").toggle(300);
});

你可以使用背景图像css

.isopen {
    background-image:url('openimage.png');
}
.isclosed {
    background-image:url('closedimage.png');
}

或者你可以改变图像src

如果你不想使用背景图像，另一个选项(通常更容易理解/遵循)是为切换设置两个单独的元素-一个用于打开，一个用于关闭-然后相应地显示/隐藏它们，例如:

<div class='show'><img...></div>
<div class='close' style='display:none;'><img...></div>

(确保图片大小相同…)

$(".show").click(function() {
    $(".show").hide();
    $(".hide").show();
    $("#mydiv").show();
}
$(".hide").click(function() {
    $(".hide").hide();
    $(".show").show();
    $("#mydiv").hide();
}
相关文章：