更改不起作用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

回答

相關問題