Blazor 如何仅在具有相同类的一个元素上添加/删除类而不是全部

Question

我是 blazor 的新手，我有 2 个（或更多）具有相同类的元素 booksMain 我想让它们在点击时消失。我如何在单击或 css 上添加类，但我只想在单击时添加而不是全部 booksMain-s

没有 JS 互操作可以吗

和

另一个例子

<button class="btn btn-success" @onclick="ChangeColor">Click Me1</button>
<button class="btn btn-success" @onclick="ChangeColor">Click Me1</button>
<button class="btn btn-success" @onclick="ChangeColor">Click Me1</button>
<button class="btn btn-success" @onclick="ChangeColor">Click Me1</button>
<button class="btn btn-success" @onclick="ChangeColor">Click Me1</button>

如何做到这一点？

Answer 1

@page "/"

@foreach (var item in items)
{
    <button class="@item.Color" @onclick="@(() =>  item.Shown = !item.Shown )">@item.ID</button>
}

@code {
    List<Book> items = Enumerable.Range(1, 10).Select(i => new Book { ID = i, Title=$"Title{i.ToString()}", Shown = false }).ToList();

    public class Book
    {
        public int ID { get; set; }
        public string Title { get; set; }
        public bool Shown { get; set; }
        public string Color => Shown ? "green" : string.Empty;
    }
}

app.css 或 style.css

.green {
background-color: green;

}

注意：上面的代码是一个简单的切换...现在对您的代码进行相应的建模。

根据请求更新...请注意，上述解决方案比以下解决方案要好得多：

    @page "/"

<button type="button" class="@Color[0] btn btn-success" @onclick="@(() => ChangeColor(0))">Click Me1</button>
<button type="button" class="@Color[1] btn btn-success" @onclick="@(() => ChangeColor(1))">Click Me1</button>
<button type="button" class="@Color[2] btn btn-success" @onclick="@(() => ChangeColor(2))">Click Me1</button>
<button type="button" class="@Color[3] btn btn-success" @onclick="@(() => ChangeColor(3))">Click Me1</button>
<button type="button" class="@Color[4] btn btn-success" @onclick="@(() => ChangeColor(4))">Click Me1</button>

@code {
    string []Color = new String[] {"", "", "", "", "" };



    private void ChangeColor(int index)
    {
        if (Color[index] == "")
        {
            Color[index] = "blue";
        }
        else
        {
            Color[index] = "";
        }
    }
  }

app.css 或 style.css

.blue {
    background-color: blue;
}

希望这会有所帮助..