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

jquery javascript 網頁設計

ppp753951555 2019-10-12 22:28:29 ‧ 1645 瀏覽

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

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

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

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

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

回應 8
分享
檢舉

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

ppp753951555 iT邦新手 4 級 ‧ 2019-10-13 17:52:07 檢舉

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

ppp753951555 iT邦新手 4 級 ‧ 2019-10-13 17:53:13 檢舉

更正再

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

ppp753951555 iT邦新手 4 級 ‧ 2019-10-16 22:19:39 檢舉

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

ppp753951555 iT邦新手 4 級 ‧ 2019-10-16 22:56:43 檢舉

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

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

登入發表回應

阿展展展

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 他只會做第一次就停了

回應 1
分享
檢舉

ppp753951555 iT邦新手 4 級 ‧ 2019-10-13 17:53:33 檢舉

謝謝大大的回覆

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙