用jquery制作点击按钮出现图片在点击消失
时间: 2024-05-04 19:18:18 浏览: 18
可以通过以下代码来实现:
HTML部分:
```html
<button id="show-image">显示图片</button>
<img id="my-image" src="image.jpg" style="display:none;">
```
jQuery部分:
```javascript
$(document).ready(function() {
$("#show-image").click(function() {
$("#my-image").toggle();
});
});
```
当用户点击“显示图片”按钮时,jQuery会通过`toggle()`方法来切换图片的显示状态。如果图片是隐藏的,则显示出来;如果图片是显示的,则隐藏起来。
相关问题
jquery点击上传图片点击按钮上传图片
您可以使用以下代码来实现在点击按钮后上传图片:
HTML 代码:
```
<input type="file" id="fileInput" style="display:none;">
<button id="uploadBtn">上传图片</button>
```
jQuery 代码:
```
$(document).ready(function(){
$('#uploadBtn').click(function(){
$('#fileInput').click();
});
$('#fileInput').change(function(){
// 在这里添加上传图片的代码
alert("图片已上传!");
});
});
```
当用户点击按钮时,这个代码会触发文件上传的对话框。当用户选择文件后,change 事件会被触发,您可以在这里添加上传图片的代码。
jquery控制点击按钮
可以使用jQuery来控制点击按钮。可以使用以下代码来禁用或启用按钮:
```
//禁用按钮
$("#button_id").prop("disabled", true);
//启用按钮
$("#button_id").prop("disabled", false);
```
其中,`#button_id`是按钮的ID。使用`prop()`方法来设置按钮的`disabled`属性。将`true`传递给`prop()`方法可以禁用按钮,将`false`传递给`prop()`方法可以启用按钮。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)