jquery里面每点击一次按钮文本框里面的值就减1
时间: 2023-12-03 11:43:41 浏览: 59
可以通过以下方式实现:
HTML代码:
```html
<input type="text" id="myInput" value="10">
<button id="myButton">减1</button>
```
jQuery代码:
```javascript
$(document).ready(function() {
$("#myButton").click(function() {
var currentValue = parseInt($("#myInput").val()); // 获取文本框当前值并转换为数字
if (!isNaN(currentValue)) { // 确保当前值是一个数字
$("#myInput").val(currentValue - 1); // 将文本框的值减1并更新
}
});
});
```
每次点击按钮时,jQuery会获取文本框的当前值并将其转换为数字,然后将其减1并更新文本框的值。注意要确保当前值是一个数字,避免出现非数字字符串导致的错误。
相关问题
html点击按钮隐藏文本框
在HTML中,你可以使用JavaScript或者jQuery来实现点击按钮隐藏文本框的功能。这里我将给出一个简单的示例,演示如何使用HTML、CSS和基本的JavaScript来完成这个任务。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<input type="text" id="myText" placeholder="输入内容">
<button onclick="hideInput()">隐藏文本框</button>
<script>
function hideInput() {
var input = document.getElementById("myText");
input.classList.toggle("hidden");
}
</script>
</body>
</html>
```
在这个例子中:
1. `input`元素是你的文本框,`placeholder`属性提供了输入提示。
2. `button`元素是一个点击按钮,`onclick`事件被设置为调用`hideInput`函数。
3. JavaScript中的`hideInput`函数会获取具有`id`为`myText`的输入框,然后通过改变它的`class`(添加或移除`hidden`)来切换其显示状态,当`hidden`存在时,文本框会被隐藏。
如果你想要使用更现代的方式,比如使用jQuery,代码会稍微简洁些:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.hidden {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="myText" placeholder="输入内容">
<button id="hideBtn">隐藏文本框</button>
<script>
$(document).ready(function () {
$('#hideBtn').click(function () {
$('#myText').toggleClass('hidden');
});
});
</script>
</body>
</html>
```
在这个jQuery版本中,我们引入了jQuery库,并且在`#hideBtn`按钮上绑定了一个点击事件,点击时会切换`#myText`的`hidden`样式。
html,jquery写一个i文本框,可以传入多个值到另一个文本框,在该文本框可以点击x图标,x掉选中的项
以下是一个示例代码,可以实现您的需求:
```html
<!DOCTYPE html>
<html>
<head>
<title>传值示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.selected-items {
margin-top: 10px;
padding: 5px;
border: 1px solid gray;
}
.selected-items i {
cursor: pointer;
}
</style>
</head>
<body>
<input type="text" id="source" placeholder="请输入要传递的值,多个值用逗号分隔">
<button id="submit">传值</button>
<div id="selected-items" class="selected-items"></div>
<script>
$(function() {
$('#submit').click(function(e) {
e.preventDefault();
var values = $('#source').val().split(',');
var items = '';
for (var i = 0; i < values.length; i++) {
items += '<span>' + values[i] + ' <i class="fa fa-close"></i></span> ';
}
$('#selected-items').append(items);
$('#source').val('');
});
$(document).on('click', '#selected-items i', function() {
$(this).parent().remove();
});
});
</script>
</body>
</html>
```
解释一下代码:
1. 我们使用了 jQuery 库来简化 JavaScript 的操作。
2. 在页面中添加了一个输入框和一个按钮,用户输入要传到另一个文本框的值,并点击按钮传值。
3. 用户选择的值会在页面中另一个区域展示出来,每个值会显示为一个带有关闭图标的标签。
4. 用户可以点击这个标签上的关闭图标来删除该项。
希望这段代码可以帮助到您!