javascript/jquery：如何根據是否選擇複選框來添加/刪除數組中的變量

-3

我輸出外賣餐廳的訂單地址：每個單獨的訂單以表格的形式輸出，每個表格都有一個複選框。我想在.ordercollected複選框被選中時將地址放入數組中，如果未選中，則將其從數組中移除。javascript/jquery：如何根據是否選擇複選框來添加/刪除數組中的變量

目前，我並沒有追加每個新地址，而是在數組中自行獲取每個訂單地址，每次我打勾.ordercollected複選框時都會更新。

真的很新的編程，所以任何幫助讚賞！

//get the addresses from selected tables 
$('.ordercollected').change(function() { 
    var activeaddress = []; 
    //loop through checkboxes with class .ordercollected 
    $(this).each(function() { 
     //if checkbox is ticked 
     if ($(this).is(':checked')) { 
      //get address from table 
      var address = $(this).closest('.ordertable').find('.address').text(); 
      //append value of address into activeaddress array 
      activeaddress.push(address); 
     }; 
    }); 
    console.log('active address: ', activeaddress); 
});

編輯在表中添加，我創建：

<table class="ordertable"> 
     <tr> 
     <td> 
      <p>Order # 
      <?php echo $order_id; ?> &mdash; 
       <time datetime="<?php the_time('c'); ?>"> 
       <?php echo the_time('d/m/Y g:i:s A'); ?> 
       </time> 
      </p> 
     </td>   
     <td> 
     <?php echo $order->billing_first_name . ' ' . $order->billing_last_name ?> 
     </td> 
     <td> 
      <?php if ($order->billing_phone) : ?> 
      <a href="tel:<?php echo $order->billing_phone; ?>">Tel.</a> 
      <?php endif; ?> 
     </td> 
     <td> 
     <p class="address"><?php echo $order->shipping_address_1 . ' ' . $order->shipping_postcode ?></p> 
     <td/> 
     <td> 
     <a class="maps-activate" href="#">Open in Maps</a> 
     </td> 
     <td> 
      <form action=""> 
      <input type="checkbox" class="ordercollected" value="0" /> 
      </form> 
     </td> 
     </tr> 
    </table>

來源

2016-05-23 Theo

每一個複選框改變時間，而不是重拍整個activeaddress陣列，在這裏做的最好的事情是添加或刪除只選定的地址當一個複選框發生變化時。要做到這一點activeaddress將不得不在該功能以外。我也認爲它會更乾淨，如果你使用JS對象而不是數組。

var activeaddress = {}; 

$('.ordercollected').change(function() { 
    // get table id 
    var orderTableID = $(this).closest('.ordertable').attr('id'); 
    // if checkbox is ticked 
    if($(this).is(':checked')) { 
     // get address from table 
     var address = $(this).closest('.ordertable').find('.address').text(); 
     // append value of address into activeaddress object 
     activeaddress[orderTableID] = address; 
    } else { // checkbox is NOT ticked 
     // remove address from object 
     delete activeaddress[orderTableID]; 
    } 
    console.log("active address: ", activeaddress); 
});

正如你所看到的，這個代碼假定與.ordertable類每個表都有一個唯一的ID可以被用作activeaddress對象的關鍵。這比每次遍歷整個數組/對象都要好，特別是如果你有一大堆訂單。如果你已經包含了你的HTML，我將能夠提供更多的幫助，但是問題在於，儘可能提供幫助。如果您有任何後續問題，請告訴我。

幾件事情需要注意：

使用pascalCase變量名和類名，使代碼更易讀（以下EG activeAddress代替activeaddress）
在我看來，使用對象，而不是一個數組一個更好的方法來添加和刪除特定項目
當問在SO問題，請給儘可能多的信息成爲可能，如包括你的HTML

最後一些鏈接：

來源

2016-05-23 15:44:05

嗨丹尼，非常感謝這一點。地址仍然只是單獨顯示在對象中，而不是將每個地址在表格中添加到對象中。我試圖創建一個數組的原因是我可以將它傳遞給google的方向api作爲旅程的途徑。我已經添加了在一段時間的PHP循環中的html，併爲每個現有的訂單創建。 – Theo

@凱文。這是非常真實的。根據正確的信息刪除之前的評論 – Julian

@Theo確保你實際給每個表一個id屬性：'

'。看起來你可以使用'$ order_id'作爲表的id。另外，由於您需要Google API陣列，因此這可能不是您的最佳解決方案。當我寫出答案時，需要使用數組並沒有在問題中詳細說明。 –

嘗試這樣的事情？

HTML：

<input type="checkbox" class="ordercollected" value="apple" /> 
<input type="checkbox" class="ordercollected" value="mango" />

$('.ordercollected').change(function() { 
    var activeaddress = []; 
    //loop through checkboxes with class .ordercollected 
    if (this.checked) { 
     activeaddress.push(this.value);    
    } 
    else { 
     var index = activeaddress.indexOf(this.value); 
     if (index > -1) { 
      activeaddress.splice(index, 1); 
     } 
    } 
    console.log('active address: ', activeaddress); 
});

來源

2016-05-23 15:43:22 Julian

朱利安您好，感謝這一點，表是在一個PHP循環產生，所以我不能改變輸入的值（據我所知） – Theo

相關問題

javascript/jquery：如何根據是否選擇複選框來添加/刪除數組中的變量

回答

相關問題