iT邦幫忙

0

jquery ul li 單列多重選項/單列單項 求解~

  • 分享至 

  • xImage

以下為codepen網址
https://codepen.io/alanotmt/pen/PoRQpKB

是我東看西看集合在一起的小功能,
但目前遇到就是像 三列他們選項會被 $('li a').removeClass("active"); 全部刪掉,
大概知道原因是因為沒有指定class? 所以一刪就是li a元素裡的都刪掉,
但該如何刪掉只有單列的選項呢?

最後加購區多項選取是否針對a的class來進行?

想輸出以下畫面: 有[] 代表有選取
份量:
大 [中] 小
套餐:
[是] 否

加購區:
[雞排][清炒時菜]

最後在後台jquery能與javascript溝通嗎? 想把回傳的值遞給javascript
變相後台會收到 中/是/雞排,清炒時菜

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
lolis
iT邦新手 5 級 ‧ 2022-08-03 13:11:12
最佳解答
// 這段代碼 修改下
$(document).ready(function(){
  $('ul li a').click(function(){
    $('ul li a',(this)).removeClass("active");
    $(this).addClass("active");
  });
});
// 修改後
$(document).ready(function(){
  $('ul li a').click(function(){
  // 判斷dom存在class 'active' 則 remove
    if($(this).hasClass('active')){
      $(this).removeClass("active");
    }
    // 否則 add 'active'
    else {
      $(this).addClass("active");
    }
 });
});
看更多先前的回應...收起先前的回應...
alanotmt iT邦新手 4 級 ‧ 2022-08-03 13:27:35 檢舉

謝謝大神幫忙,不過對於(是/否)與(大/中/小) 的選擇 希望是能擇一,這些能覆選會怪怪的~

lolis iT邦新手 5 級 ‧ 2022-08-03 13:54:39 檢舉

https://codepen.io/createwheel/pen/zYWRbpe

增加 class radio\checkbox 區別

alanotmt iT邦新手 4 級 ‧ 2022-08-03 14:37:17 檢舉

大概有看懂大神的寫法,以class區分可以單選/複選的地方,並作為開頭歷遍class底下所有li a再達到單選的效果,謝謝你

剩最後回傳值,大神有頭緒嗎?

lolis iT邦新手 5 級 ‧ 2022-08-04 10:06:10 檢舉

抱歉了/images/emoticon/emoticon37.gif
昨日忙碌,今早看下,新思路,還是上面的鏈路地址。

alanotmt iT邦新手 4 級 ‧ 2022-08-04 15:12:40 檢舉

lolis
沒關係~沒解答我也會試著自己亂寫看看XD
大神雖然這方法可行,但我在想如果項目/商品愈多會很爛維護,
我現在往如果能在元素裡抓到當下的項目是否被active 如果是就獲得當下的值,用迴圈跑會不會就不需要額外增加ID

lolis iT邦新手 5 級 ‧ 2022-08-04 16:16:15 檢舉

如果可以引用 Vue框架 就簡單多了

alanotmt iT邦新手 4 級 ‧ 2022-08-05 17:08:53 檢舉

lolis
我用javascript 亂試試出來了,有比較簡單可以針對active的項目全部拉出來,但我有遇到新的問題就是pop區裡面的內容很多就會凸出來...也沒有往下可以給你拉~

我要發表回答

立即登入回答