Question

任何人都可以给我解决方法当我点击像黑色x这样的图像然后显示div时使用什么方法然后再次点击图像它会变成红色x并隐藏div？

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

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

Answer 1

不是使用按钮的.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();
}

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

1 个答案: