互動設計思考中的「遍歷」概念

你可以看到下列有三個 div ，如果你去按一下，這三個都會有變化。

在做法上，並不是一個一個去設定，而是去有一種設定的概念和做法，一次就把那三個 div 都設定好了。

這種互動設計的概念和做去，稱之為「遍歷」。

在互動文本寫作中，這是必要的手法之一，可以讓你對如何互動有更多思考上的可能。

語法是，.forEach 。


 

this is A

this is B

this is C

看一下語法：

<div data-note="test0524">
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;">this is A</div>

<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;">this is B</div>

<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;">this is C</div>
</div>
<script>
// 1. 選取目標元素，這是 div 標籤
const elements = document.querySelectorAll("div[data-note='test0524'] >div");

// 2. 遍歷每一個元素並指定 onclick 事件
elements.forEach(element => {
    element.onclick = function() {
        this.innerHTML = "這是新填入文字";
        // 在這裡加入您的點擊邏輯
    };
});
</script><br />

說明：

你可以看到 data-note="test0524"，這是我們為 div 給了一個我們自己設定的標籤標記。這樣就不用每一次都用 class 或是 id 。

再來，.querySelectorAll("div[data-note='test0524'] >div") 是使用 css 的選擇器來選擇。如果不會css選擇器的運用，這一部分，你真的要去學會。