更改不起作用jQuery

-2

我试图在div中显示更改值，但无法正常工作。这里有一个例子：更改不起作用jQuery

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>

来源

2016-08-01 MAHAR

当你做一些事情会触发一个改变事件时，它就可以正常工作。 *提示提示* –

你似乎正在混合jquery和jquery。尝试保持某种一致性，我知道document.getElementById的作品，但既然你使用jQuery为什么不只是$（“＃数量”）？ – JonH

更改事件不会被调用，当你试图用jQuery做的，它只会触发时您强制通过鼠标或键盘更改值...因此，您需要在按功能设置数量时触发更改事件。

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()) ; 
    });

来源

2016-08-01 19:53:39 CNKR

您的加号和减号应该处理一个click事件信号的变化按钮。作为一个例子，如果你直接进入输入字段并输入一个数字并失去焦点，你会看到你的div得到更新。你可以做一些事情如下：

首先将类分配给两个按钮，相同的类名：

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

然后处理类级别的事件：

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

您可能希望重构这个，比如调用getValue的方法，因为你已经有了一个set。在按钮点击事件中，您可以调用setValue()函数，然后在getValue()之后立即返回您的数量。

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

来源

2016-08-01 19:46:00 JonH

你可以添加一个工作示例 – MAHAR

是的添加，设置两个按钮有一个类名，然后处理点击事件。 – JonH

在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()) 
     });

来源

2016-08-01 19:50:20 jonju

这是另一种可能性，但我认为设置应该只设置值，应该调用另一个方法获取所述值。 – JonH

这不是我的问题 – MAHAR

@MAHAR你的问题是什么。然后？您想要显示div – jonju

如果您的代码与您张贴的顺序相同，则不起作用。

通常情况下，标记首先显示，因为它必须首先在浏览器中下载，然后Javascript才能使用它。

因此，这将是

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

我运行了你的代码，直接在控制台出现错误，你无法在null上定义onclick。当JavaScript正在执行时，您的按钮为空，因为它没有等待下载html。

在jQuery中，您可以使用类似document.ready（）的方法在执行代码之前等待下载html（DOM）。

尝试重新组织代码并将代码包装在document.ready中，并且还要关注任何现代浏览器中的开发人员工具（控制台）。

如果这没有帮助，那么再来这里。

我刚刚编辑了您的代码，我可以从数量输入字段中获取文本，以便在显示div中显示较小的更改。

<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事件不会被触发。如果你想测试它，然后把你的光标放在数量输入字段中，然后在那里输入一些内容，然后点击屏幕上的其他地方，你会看到无论你在数量框中输入什么，都会显示在显示div中。这是因为您更改了输入字段并移动了焦点。

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

来源

2016-08-01 19:59:15

更改不起作用jQuery

回答

相关问题