iT邦幫忙

1

如何讓兩個相同的 section 有一樣的點擊事件

  • 分享至 

  • xImage

你們好,先謝謝你們花時間看我的問題,目前我正在嘗試著模仿 trivago 資料顯示的方式

附上網址 : https://reurl.cc/1Q077X

這是我的 codepen : https://codepen.io/ppp753951555/pen/qBBbrGa

目前介面做的差不多 想做跟第一筆資料一樣的反應,但是我不太知道怎麼讓他第二筆也一樣
目前大部分查到的資料都是用 jquery 更改CSS 去隱藏或顯示 div
有人能給個方向、教學或者關鍵字那就太好了
或者也可以指正我寫法或一些問題
新手初學我會改進
謝謝各位!

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

2 個回答

3
dragonH
iT邦超人 5 級 ‧ 2019-10-12 22:51:15
最佳解答

首先

id 不要重複

然後大概的邏輯就是

多個 section

e.g. A, B, C

當 A 的評分被點擊時

就展開 A 的評分區塊

看你要用 children 找 或者是用 id 或 class 找

大概就像這樣

我只有大概改一下 house-list-score 而已

codepen

看更多先前的回應...收起先前的回應...

好的謝謝大大指導我在研究看看

更正 再

froce iT邦大師 1 級 ‧ 2019-10-14 14:52:09 檢舉

請愛用vue.js。
習慣的話你會愛上這種MVVM的設計思維的。

dragonH iT邦超人 5 級 ‧ 2019-10-14 18:51:47 檢舉

真的

而且用 vue 後

估計 code 大概只會剩下現在的 1/3 /images/emoticon/emoticon07.gif

dragonH大大您好想再請教您一個問題就是我該如何在 pug 裡用迴圈讓 id 自動變更 0,1,2,3,4呢?
https://codepen.io/ppp753951555/pen/KKKMZqX
謝謝大大

dragonH iT邦超人 5 級 ‧ 2019-10-16 22:37:02 檢舉

ppp753951555

你的 i 就是 index

然後這樣用

section.item-list(id = `item${i}`)

codepen

真的非常謝謝!!!又學會一招了

dragonH iT邦超人 5 級 ‧ 2019-10-16 23:01:17 檢舉

/images/emoticon/emoticon12.gif

0
阿展展展
iT邦好手 1 級 ‧ 2019-10-13 03:18:36

我很笨... 但還是想要試看看...
你的問題應該是 如何「同時更改show出的值吧?」

目前我有的很醜的寫法是...

需求 <span id="s1">同族</span> 紫卡 <span id="s2">0</span> 張, 至少含
<span id="s3">盧修斯</span> 紫卡 <span id="s4">0</span>張
                
                
document.getElementById("s1").innerHTML =
    document.getElementById("s5").innerHTML = a1[0];
document.getElementById("s3").innerHTML =
    document.getElementById("s9").innerHTML =
    document.getElementById("s10").innerHTML = a3[0];

這樣可以用最最最...最基本的方法來處理這樣的問題
只不過還有很多可以改善的空間

劍與遠征肥料計算機v1.1

如果全部都用同一個id 他只會做第一次就停了

謝謝大大的回覆

我要發表回答

立即登入回答