HTML和JavaScript:更改按钮文字(切换)

本文介绍了HTML和JavaScript:更改按钮文字(切换)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

I need to change a button's text, however I think the issue I don't understand is how to change it back using separate files. I need to use jQuery to toggle pictures. This will hide the image and show the image. The button is "hard coded" I think in both the HTML and JavaScript.

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

The button is showing "hide" to initially hide the image. Once the button is clicked the image disappears and the button's text turns to "Show". However it will not turn back to "hide".

HTML:

<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>

JavaScript:

JavaScript:

$('#skybutton').click(function() { $("#sky").toggle(); $(skybutton).val('Show'); });

推荐答案

欢迎使用stackoverflow Shepard！

Welcome to stackoverflow Shepard!!

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

You need little bit of logic in your javascript in order to make this work both ways:

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

在点击功能中，您需要神奇的地方: 尝试以下代码:

Here in the click function is where you need magic to happen: Try this code:

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

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

So what is happening above is that you already have a click function attached to the button so with in the function you can refer to that button as this and you can check what the value of the button is.

您的if语句变为嘿"按钮if您的值是隐藏"，将值更改为显示"，否则您的值必须是显示"，因此将其更改回隐藏"，让我知道是否可以清除任何内容否则为您服务.该项目祝您好运

Your if statement goes hey button if your value is 'Hide' change the value to 'Show' and else your value must be 'Show' so change it back to 'Hide' let me know if I can clear anything else up for you. Good luck with the project