foreach ステートメントで各写真を個別に非表示/再表示する

Question

更新: @Exildur ソリューションを使用すると動作しますが、ページを更新すると、非表示の写真が再び表示されます。:S.

プロジェクトのリストがあり、それぞれに独自の写真が付いています。各写真に写真の非表示/表示ボタンを追加する必要があります。問題は、ID を指定して js 関数を使用すると、ID は一意である必要があるため、最初の写真のみが非表示/表示されることです。 これはコードです:

ああああ

Answer 1

名前に追加されたリストの項目インデックスを使用して、各写真に一意の識別子を作成できます。例えば：＃＃＃ リーリー

これにより、写真ごとに一意の ID (photo_0、photo_1 など) が作成されます。

このボタンには onclick 属性があり、アイテムのインデックスをパラメーターとして渡して togglePhoto() 関数を呼び出し、対応する写真を取得し、表示スタイルをブロック/なしに設定することで表示/非表示を切り替えます。

更新: ページ更新後の永続性

リクエストに応じて、ページを更新しても非表示/表示画像を永続化するために、ブラウザのストレージを使用してどの画像が表示されるか非表示になるかを記録する機能を追加しました。 リーリー

上記の例では、各写真の「表示」スタイルの値が localStorage から取得されます。存在しない場合は、デフォルトで「ブロック」(表示) になります。

togglePhoto() 関数は、ボタンがクリックされるたびに、更新された表示値を localStorage に保存します。