基于ELM的If Else语句实现单个同class Div点击切换蓝灰颜色

Got it, let's break this down for Elm! Unlike vanilla JS where you can directly tweak the DOM, Elm relies on the Model-View-Update (MVU) pattern—so we'll track each sidebar's state explicitly and render its appearance based on that state. Here's a complete implementation that lets each .sidebar2 toggle between blue and gray independently, using if/else logic as requested:

Step 1: Define Our State (Model) #

First, we need a way to track each sidebar's color state. We'll give each sidebar a unique ID (so we can target it individually) and a boolean flag to track if it's set to blue (or gray):

type alias Sidebar =
    { id : Int
    , isBlue : Bool
    }

type alias Model =
    List Sidebar

Step 2: Define User Actions (Msg) #

We need a message type to handle the click event. When a sidebar is clicked, we'll send a message with its ID so we know which one to update:

type Msg
    = ToggleSidebar Int

Step 3: Update State Based on Actions #

The update function will handle flipping the color state for the clicked sidebar. We'll use an if/else check to explicitly toggle the isBlue value (you could also use not, but this matches your request for if/else):

update : Msg -> Model -> Model
update msg model =
    case msg of
        ToggleSidebar sidebarId ->
            List.map
                (\sidebar ->
                    -- Check if this is the sidebar that was clicked
                    if sidebar.id == sidebarId then
                        -- Toggle its color state with if/else
                        if sidebar.isBlue then
                            { sidebar | isBlue = False }  -- Switch to gray
                        else
                            { sidebar | isBlue = True }   -- Switch to blue
                    else
                        sidebar  -- Leave other sidebars unchanged
                )
                model

Step 4: Render the View #

The view function will render each sidebar from our model. We'll set the onClick handler to send the ToggleSidebar message with the sidebar's ID, and use an if/else to set the background color dynamically:

import Html exposing (Html, div, text)
import Html.Attributes exposing (class, style)
import Html.Events exposing (onClick)

view : Model -> Html Msg
view model =
    div []
        (List.map
            (\sidebar ->
                div
                    [ class "sidebar2"  -- Keep your original class
                    , onClick (ToggleSidebar sidebar.id)
                    -- Use if/else to set background color
                    , style "background-color"
                        (if sidebar.isBlue then
                            "blue"
                         else
                            "gray"
                        )
                    -- Add optional styling for spacing/visibility
                    , style "padding" "10px"
                    , style "margin" "5px"
                    , style "cursor" "pointer"
                    ]
                    [ text (String.fromInt sidebar.id) ]  -- Replace with your original content
            )
            model
        )

Step 5: Initialize and Wire It Up #

Finally, we'll initialize our model with the sidebars you mentioned, and set up the Elm program:

init : Model
init =
    [ { id = 1, isBlue = False }  -- Starts gray
    , { id = 2, isBlue = False }
    , { id = 3, isBlue = False }
    -- Add more sidebars here as needed
    ]

main : Program () Model Msg
main =
    Browser.sandbox
        { init = init
        , view = view
        , update = update
        }

How This Works #

• Independent State: Each sidebar has its own entry in the model, so clicking one won't affect the others.
• Explicit If/Else: We use if/else logic both to toggle the state in update and to set the color in view, exactly as you requested.
• Preserves Your Original Class: The sidebar2 class is kept, so any existing CSS you have for that class will still apply.

内容的提问来源于stack exchange，提问作者Sam Lawless