帮我写一个js代码,用多个相同的div,要求点击id为cc_sub减少id为gnum c_pt的value值1,点击cc_add增加id为gnum c_pt的值1
时间: 2024-02-13 11:01:37 浏览: 23
可以使用以下代码实现:
```html
<!-- HTML代码 -->
<div>
<button id="cc_sub">-</button>
<input type="text" id="gnum" value="0">
<button id="cc_add">+</button>
</div>
```
```javascript
// JS代码
const ccSubBtn = document.getElementById('cc_sub');
const ccAddBtn = document.getElementById('cc_add');
const gnumInput = document.getElementById('gnum');
ccSubBtn.addEventListener('click', () => {
gnumInput.value = parseInt(gnumInput.value) - 1;
});
ccAddBtn.addEventListener('click', () => {
gnumInput.value = parseInt(gnumInput.value) + 1;
});
```
注意,这里只是一个示例,如果需要使用多个相同的div,可以在HTML代码中复制多个相同结构的div,并分别为它们设置不同的id值即可。
相关问题
帮我写一个js代码,用4个相同的div,要求点击id为cc_sub减少id为gnum c_pt的value值1,点击cc_add增加id为gnum c_pt的值1
好的,下面是代码实现:
```html
<!-- HTML结构 -->
<div class="container">
<button id="cc_sub">-</button>
<div class="gnum c_pt">0</div>
<button id="cc_add">+</button>
</div>
<div class="container">
<button id="cc_sub">-</button>
<div class="gnum c_pt">0</div>
<button id="cc_add">+</button>
</div>
<div class="container">
<button id="cc_sub">-</button>
<div class="gnum c_pt">0</div>
<button id="cc_add">+</button>
</div>
<div class="container">
<button id="cc_sub">-</button>
<div class="gnum c_pt">0</div>
<button id="cc_add">+</button>
</div>
```
```javascript
// JS代码
const btnSubs = document.querySelectorAll('#cc_sub');
const btnAdds = document.querySelectorAll('#cc_add');
btnSubs.forEach((btnSub, index) => {
const num = document.querySelectorAll('.gnum.c_pt')[index];
btnSub.addEventListener('click', () => {
if (num.innerText > 0) {
num.innerText--;
}
});
});
btnAdds.forEach((btnAdd, index) => {
const num = document.querySelectorAll('.gnum.c_pt')[index];
btnAdd.addEventListener('click', () => {
num.innerText++;
});
});
```
这样就可以实现4个相同的div,点击对应的加减按钮,操作对应的value值了。
帮我写一个js代码,要求点击id为cc_sub减少id为gnum c_pt的value值1,点击cc_add增加id为gnum c_pt的值1
可以这样写:
```javascript
// 获取 cc_sub 元素
var ccSub = document.getElementById("cc_sub");
// 给 cc_sub 绑定点击事件
ccSub.addEventListener("click", function() {
var gnumCpt = document.getElementById("gnum_c_pt");
var value = parseInt(gnumCpt.value);
if (value > 1) {
gnumCpt.value = value - 1;
}
});
// 获取 cc_add 元素
var ccAdd = document.getElementById("cc_add");
// 给 cc_add 绑定点击事件
ccAdd.addEventListener("click", function() {
var gnumCpt = document.getElementById("gnum_c_pt");
var value = parseInt(gnumCpt.value);
gnumCpt.value = value + 1;
});
```
上面的代码中,我们获取了 `cc_sub` 和 `cc_add` 两个元素,并且给它们绑定了点击事件。当用户点击 `cc_sub` 时,我们获取 `gnum_c_pt` 元素的值并将其减 1,当值大于 1 时才减少。当用户点击 `cc_add` 时,我们获取 `gnum_c_pt` 元素的值并将其加 1。最后,我们将修改后的值赋值回 `gnum_c_pt` 元素的 value 属性。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
-
- 潮影森美 全硅胶性感甜心胶实体娃娃 159cm 169普通款 - <input type="number" id="gnum" data-id="71790817" class="gnum c_pt" min="1" value="7"> + ¥15200.00 删除
帮我做一个js代码,我点击dl标签class为car car_on时候点一次将他class属性设置为car,再次点击时恢复为car car_on,并判断如果class为car car_on时,将data-id和input的value值用post传值到t.php页面并回调显示在一个id为count的em标签里面,请写出完整的js代码和PHP代码
![](https://s.cccgx.com/t/200x200/images/qu/18976/gallery/m20211019094313_99448.jpg)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
-
- 潮影森美 全硅胶性感甜心胶实体娃娃 159cm 169普通款 - <input type="number" id="gnum" data-id="71790817" class="gnum c_pt" min="1" value="7"/> + ¥15200.00 删除
>帮我做一个js代码,我点击dl标签class为car时候点一次将他class属性设置为car car_on,再次点击时恢复为car,并加上判断如果dl的class为car car_on时,将data-id和input的value值用post传值到t.php页面并回调显示在一个id为c_gprice的em标签里面,把t.php的代码也写出了
![](https://s.cccgx.com/t/200x200/images/qu/18976/gallery/m20211019094313_99448.jpg)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)