Question

我正在尝试在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>

Answer 1

您的加号和减号按钮应处理点击事件以表示更改。例如，如果您直接进入输入字段并输入数字并失去焦点，您将看到您的div获得更新。您可以执行以下操作：

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

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

然后在班级处理事件：

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

你可能想要重构这个，比如调用getValue方法，因为你已经有了一个set。在按钮点击事件中，您可以调用setValue()功能，然后将其调用到getValue()，此功能只会返回您的数量。

这并未全部经过测试，但您应该考虑其他可能性。

Answer 2

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

Answer 3

当您尝试使用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())   ;
  });

Answer 4

如果您的代码与您发布的订单的顺序相同，那么它将无效。

通常标记首先出现，因为它必须首先在浏览器上下载，然后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事件。如果你想测试它然后把光标放在数量输入字段并在那里输入一些东西，然后点击屏幕上的其他地方，你会看到你在数量框中输入的任何内容都将显示在show div中。这是因为您更改了输入字段并移动了焦点。

所以我建议您在更新数量输入字段的同时更新show div（我在上面的代码中添加了一个示例）并删除了无效的onchange事件。

改变不工作的jQuery

4 个答案: