更改不起作用jQuery

change not working jQuery

本文关键字：jQuery 不起作用      更新时间：2023-09-26

我正在尝试在div中显示更改值，但没有成功。这里有一个例子：

button_up=document.getElementById('up');
button_down=document.getElementById('down');
button_up.onclick=function() {setQuantity('up');}
button_down.onclick=function() {setQuantity('down');}
quantity = document.getElementById('quantity');
function setQuantity(upordown) {
    if (quantity.value > 1) {
        if (upordown == 'up'){++quantity.value;}
        else if (upordown == 'down'){--quantity.value;}}
    else if (quantity.value == 1) {
        if (upordown == 'up'){++quantity.value;}}
    else
        {quantity.value=1;}
}
$('.order-option input[type=''text'']').change(function(){
           $('.show').text($('#quantity').val())   
         });
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="order-option">Quantity: <span id="quantity-field">
        <button id="down">-</button>
        <input type="text" id="quantity" value="1">
        <button id="up">+</button>
    </span>
</div>
<div class="show"></div>

加号和减号的按钮应该处理一个点击事件来发出更改的信号。例如，如果您直接进入输入字段并输入一个数字，然后失去焦点，您将看到您的div得到更新。你可以做以下事情：

首先为两个按钮分配一个类，类名相同：

<button class="movingOnUpOrDown" id="down">-</button>
<button class="movingOnUpOrDown" id="up">-</button>

然后在类级别处理事件：

$(".movingOnUpOrDown").click(function(){
   $('.show').text($('#quantity').val()); 
});

您可能需要对此进行重构，例如调用getValue的方法，因为您已经有了一个集合。在按钮点击事件中，您可以调用setValue()函数，然后紧接着调用getValue()，该函数只需返回您的数量。

这并不是所有的测试，但应该让你思考其他的可能性。

当您尝试使用jquery时，不会调用Change事件，只有当您通过鼠标或键盘强制更改值时才会触发它。。。因此，您需要在根据功能设置数量的同时触发更改事件。

var button_up=document.getElementById('up');
var button_down=document.getElementById('down');
button_up.onclick=function() {setQuantity('up');}
button_down.onclick=function() {setQuantity('down');}
var quantity = document.getElementById('quantity');
var $targetInput = $('.order-option input[type=''text'']');
function setQuantity(upordown) {
    if (quantity.value > 1) {
        if (upordown == 'up'){++quantity.value;}
        else if (upordown == 'down'){--quantity.value;}}
    else if (quantity.value == 1) {
        if (upordown == 'up'){++quantity.value;}}
    else
        {quantity.value=1;}
   $targetInput.trigger('change');
}
$targetInput.change(function(){
    $('.show').text($('#quantity').val())   ;
  });

setQuantity函数中的小更改

function setQuantity(upordown) {    
    if (quantity.value > 1) {
        if (upordown == 'up'){++quantity.value;}
        else if (upordown == 'down'){--quantity.value;}}
    else if (quantity.value == 1) {
        if (upordown == 'up'){++quantity.value;}}
    else{
         quantity.value=1;
    }   
    $('.show').html(quantity.value);
}

你不需要这个

$('.order-option input[type=''text'']').change(function(){
           $('.show').text($('#quantity').val())   
         });

如果代码的顺序与发布的顺序相同，那么它将不起作用。

通常标记会先出现，因为必须先在浏览器上下载它，Javascript才能使用它

所以它将是

HTMLJavascript库引用，如jQuery然后自定义JavaScript。

我运行了你的代码，在控制台中直接得到了一个错误，你不能在null上定义onclick。当javascript执行时，您的按钮为null，因为它没有等待html下载。

在jQuery中，您可以使用类似document.ready（）的东西来等待下载html（DOM），然后再执行代码。

尝试重新组织代码并将代码包装在文档中。准备好了，还要留意任何现代浏览器中的开发工具（控制台）。

如果那没用，那就再来这里。

我刚刚编辑了您的代码，我可以从数量输入字段中获得文本，只需稍作更改即可显示在showdiv中。

<html>
<body>
<div class="order-option">Quantity: <span id="quantity-field">
        <button id="down">-</button>
        <input type="text" id="quantity" value="1">
        <button id="up">+</button>
    </span>
</div>
<div class="show"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
button_up=document.getElementById('up');
button_down=document.getElementById('down');
button_up.onclick=function() {setQuantity('up');}
button_down.onclick=function() {setQuantity('down');}
quantity = document.getElementById('quantity');
function setQuantity(upordown) {
    if (quantity.value > 1) {
        if (upordown == 'up'){++quantity.value;   $('.show').text($('#quantity').val())   ;}
        else if (upordown == 'down'){--quantity.value;}}
    else if (quantity.value == 1) {
        if (upordown == 'up'){++quantity.value;}}
    else
        {quantity.value=1;}
}
$('.order-option input[type=''text'']').change(function(){
           $('.show').text($('#quantity').val())   
         });
         });
 </script>

由于数量输入不会发生物理更改，因此不会触发onchange事件。如果你想测试它，那么把光标放在数量输入字段中，在那里键入一些东西，然后点击屏幕上的其他地方，你会看到你在数量框中键入的任何东西都会显示在showdiv中。这是因为你更改了输入字段并移动了焦点。

因此，我建议您在更新数量输入字段的同时更新showdiv（我在上面的代码中添加了一个例子），并删除不起作用的onchange事件。

相关文章：