2 回答

TA貢獻1796條經驗 獲得超7個贊
首先,第一個 div 中有一個錯字。您忘記回顯該值。改變:
onclick="decrement(<?php $count; ?>)"
到
onclick="decrement(<?php echo $count; ?>)"
然后,由于您將 id 作為參數傳遞給您的 js 函數,因此您不應該對該函數中的值進行硬編碼。
您還需要在循環之后輸出 javascript,否則您將創建多個具有相同名稱的函數,這顯然是行不通的。
將其更改為:
function increment(id) {
document.getElementById(id).value++;
}
function decrement(id) {
document.getElementById(id).value--;
}
現在您的函數中沒有硬編碼值,因此您可以重用它。

TA貢獻1801條經驗 獲得超16個贊
您不需要使用id屬性 - 純粹基于整數的 id 無論如何都是無效的(或者直到 HTML5 才有效)。您可以sibling selectors使用方便。作為演示,可以從根本上改變/簡化javascript函數
<style>
div.entry{ display:inline-block;width:2rem;border:1px solid black; height:2rem; line-height:2rem; text-align:center; font-size:1rem; clear:none; cursor:pointer; }
input[type='text']{display:inline-block;height:2rem; }
</style>
<script>
function decrement(e){
e.target.nextElementSibling.value--;
}
function increment(e){
e.target.previousElementSibling.value++;
}
</script>
for( $i=1; $i < 10; $i++ ){
$value=mt_rand(20,50);
echo "
<div>
<div class='entry value-minus1' onclick='decrement(event)'>-</div>
<input class='entry value1' type='text' value='$value' />
<div class='entry value-plus1' onclick='increment(event)'>+</div>
</div>";
}
更好的是刪除任何內聯函數調用并使用外部注冊的事件處理程序 - 這使 HTML 保持美觀和干凈,并將 HTML 和 javascript 分開。
<script>
document.addEventListener('DOMContentLoaded',()=>{
document.querySelectorAll('div.entry').forEach( div=>{
div.addEventListener('click',function(e){
switch( this.dataset.dir ){
case 'increment':
this.previousElementSibling.value++;
break;
case 'decrement':
if(this.nextElementSibling.value > 0) this.nextElementSibling.value--;
break;
}
});
})
});
</script>
for( $i=1; $i < 10; $i++ ){
$value=mt_rand(5,50);
echo "
<div>
<div class='entry value-minus1' data-dir='decrement'>-</div>
<input class='entry value1' type='text' value='$value' />
<div class='entry value-plus1' data-dir='increment'>+</div>
</div>";
}
- 2 回答
- 0 關注
- 186 瀏覽
添加回答
舉報