Question

我需要更改按钮的文本，但是我认为我不明白的问题是如何使用单独的文件将其更改回。我需要使用jQuery来切换图片。这将隐藏图像并显示图像。我认为按钮在HTML和JavaScript中都是“硬编码的”。

按钮显示“隐藏”以最初隐藏图像。单击按钮后，图像消失，按钮的文本变为“显示”。但是，它不会变回“隐藏”。

HTML：

Western

JavaScript：

<img src="sky.jpg" id="sky">
<input type='button' onclick="js/toggle.js" id="skybutton" value="Hide">

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/toggle.js"></script>

Answer 1

欢迎来到stackoverflow Shepard！

您需要在Javascript中添加一点逻辑，以使这两种方式均能实现：

<img src="sky.jpg" id="sky">
<input type='button' onclick="js/toggle.js" id="skybutton" value="Hide">

在点击功能中，您需要发生魔术：尝试以下代码：

$('#skybutton').click(function() {
    $("#sky").toggle();
    if($(this).val() === 'Hide'){
        $(this).val('Show');
    }else{
        $(this).val('Hide');
    }
});

因此，上面发生的事情是您已经在按钮上附加了单击功能，因此在该功能中，您可以将该按钮称为this，然后可以检查按钮的值。

您的if语句转到了“ if”按钮，您的值是“隐藏”，将值更改为“显示”，否则您的值必须是“显示”，因此将其更改回“隐藏”，让我知道是否可以为您清除其他任何内容。该项目祝您好运

Answer 2

您可以使用if else语句来实现此目的：

$('#skybutton').click(function() {
    If($(this).val() == "hide") {
        $("#sky").hide();
        $(this).val("Show")
    } else {
        $("#sky").show();
        $(this).val("hide")
    }

});

Answer 3

为了支持我是Cavic，请提供更具可读性的版本

$('#skybutton').click(() => {
    $("#sky").toggle()
    if ($(this).val() === "hide") {
        $(this).val("show")
        return
    }
    $(this).val("hide")
})

HTML和JavaScript：更改按钮文字（切换）

3 个答案: