首頁 >web前端 >前端問答 >jquery怎麼實現單選加減刪除

jquery怎麼實現單選加減刪除

WBOY
WBOY原創
2023-05-14 10:21:07647瀏覽

隨著網路的快速發展,前端技術也越來越受到關注,其中jquery是前端常用的js庫之一。在網站開發中,常需要針對商品選擇進行加減操作、刪除操作等,本文將介紹如何利用jquery實現單選加減刪除。

一、單選操作

在商品選擇時,我們通常需要進行單選操作,也就是在多個選項中只能選擇一個。以下就以一個商品分類為例,展示如何利用jquery實作單選操作。

首先,在前端頁面中透過input標籤產生多個單選按鈕,如下面的程式碼所示:

<div class="category">
  <input type="radio" name="radio" value="1"/>电脑
  <input type="radio" name="radio" value="2"/>手机
  <input type="radio" name="radio" value="3"/>电视
</div>

以上程式碼產生了三個單選按鈕,它們的名稱均為"radio",值分別為1、2、3。這樣做的目的是為了方便透過jquery來取得被選取的值。如果不給單選按鈕賦予名稱,jquery將無法取得到被選取的值。

接下來,需要編寫jquery程式碼,來實現單選操作:

$('.category input').click(function(){
  $('.category input').attr('checked',false);
  $(this).attr('checked',true);
})

以上程式碼的作用是,在使用者點擊單選按鈕時,將所有按鈕的"checked"屬性設為false,然後將目前的按鈕的"checked"屬性設為true。這樣做可以保證在同一時間只有一個單選按鈕被選中。

二、加減運算

接下來,我們將介紹如何利用jquery實作加減運算。在商品選擇時,我們可能需要選擇商品數量,這時就需要透過加減按鈕來實現。以下就以數量選擇為例,示範如何利用jquery實作加減操作。

首先,在前端頁面中產生數量選擇的html代碼:

<div class="quantity">
  <button class="minus">-</button>
  <input type="text" name="quantity" value="1" class="number" disabled>
  <button class="plus">+</button>
</div>

以上程式碼產生了一個數量選擇框,包括一個減號按鈕、一個數量輸入框、一個加號按鈕。數量輸入框的初始值為1,被停用,因此使用者只能透過加減按鈕來改變數量。另外,每個按鈕都被賦予了一個class名,方便透過jquery進行綁定。

接下來,需要編寫jquery程式碼,來實現加減操作:

$('.quantity .minus').click(function(){
  var num = parseInt($('.quantity .number').val());
  if(num > 1){
    $('.quantity .number').val(num - 1);
  }else{
    alert('数量不能小于1');
  }
})
$('.quantity .plus').click(function(){
  var num = parseInt($('.quantity .number').val());
  $('.quantity .number').val(num + 1);
})

以上程式碼的作用是,在使用者點擊減號按鈕時,透過jquery取得數量輸入框中的當前值,如果該值大於1,則將其減一;如果該值等於1,則無法繼續減少,並彈出提示訊息。當使用者點選加號按鈕時,直接將數量輸入框的數值加一。這樣做就實現了簡單的加減功能。

三、刪除操作

最後,我們將介紹如何利用jquery實作刪除操作。在商品選擇中,我們可能需要刪除某個商品,這時就需要透過刪除按鈕來實現。以下就以商品列表為例,示範如何利用jquery實作刪除操作。

首先,在前端頁面中產生商品列表的html代碼:

<ul>
  <li>
    <img src="goods1.jpg">
    <h2>商品1</h2>
    <p>价格:99元</p>
    <button class="delete">删除</button>
  </li>
  <li>
    <img src="goods2.jpg">
    <h2>商品2</h2>
    <p>价格:199元</p>
    <button class="delete">删除</button>
  </li>
  <li>
    <img src="goods3.jpg">
    <h2>商品3</h2>
    <p>价格:299元</p>
    <button class="delete">删除</button>
  </li>
</ul>

以上程式碼產生了一個商品列表,每個商品包含商品圖片、商品名稱、商品價格、刪除按鈕。刪除按鈕同樣被賦予了class名,方便透過jquery進行綁定。

接下來,需要編寫jquery程式碼,來實現刪除操作:

$('.delete').click(function(){
  $(this).parent('li').remove();
})

以上程式碼的作用是,當使用者點擊刪除按鈕時,透過jquery取得該按鈕的父元素li,然後將其刪除。這樣做就實現了商品清單中的刪除操作。

結語

透過以上三個案例的演示,我們可以看出,利用jquery可以很方便地實現單選、加減、刪除等常用操作。此外,在實際應用中,我們還可以根據具體需求,進一步進行改進和最佳化。希望此文對大家有幫助。

以上是jquery怎麼實現單選加減刪除的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn