84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
更新: @Exildur ソリューションを使用すると動作しますが、ページを更新すると、非表示の写真が再び表示されます。:S.
プロジェクトのリストがあり、それぞれに独自の写真が付いています。各写真に写真の非表示/表示ボタンを追加する必要があります。問題は、ID を指定して js 関数を使用すると、ID は一意である必要があるため、最初の写真のみが非表示/表示されることです。 これはコードです:
名前に追加されたリストの項目インデックスを使用して、各写真に一意の識別子を作成できます。例えば：＃＃＃ リーリー
上記の例では、各写真の「表示」スタイルの値が localStorage から取得されます。存在しない場合は、デフォルトで「ブロック」(表示) になります。
togglePhoto() 関数は、ボタンがクリックされるたびに、更新された表示値を localStorage に保存します。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
名前に追加されたリストの項目インデックスを使用して、各写真に一意の識別子を作成できます。例えば：＃＃＃ リーリー
これにより、写真ごとに一意の ID (photo_0、photo_1 など) が作成されます。
このボタンには onclick 属性があり、アイテムのインデックスをパラメーターとして渡して togglePhoto() 関数を呼び出し、対応する写真を取得し、表示スタイルをブロック/なしに設定することで表示/非表示を切り替えます。
更新: ページ更新後の永続性
リクエストに応じて、ページを更新しても非表示/表示画像を永続化するために、ブラウザのストレージを使用してどの画像が表示されるか非表示になるかを記録する機能を追加しました。 リーリー上記の例では、各写真の「表示」スタイルの値が localStorage から取得されます。存在しない場合は、デフォルトで「ブロック」(表示) になります。
togglePhoto() 関数は、ボタンがクリックされるたびに、更新された表示値を localStorage に保存します。