Blazor如何仅给单个同class元素添加/移除类（无JS互操作）

嘿，作为Blazor新手碰到这种单个元素交互的问题太正常了！完全不用JS Interop就能搞定，我给你分两种情况详细说清楚～

核心思路是给每个.booksMain元素绑定独立的状态变量，通过状态变化控制元素的显示/隐藏，完全用Blazor的原生绑定实现：

情况1：元素是从集合渲染出来的（推荐，适合数量多的场景） #

如果你的.booksMain元素是循环生成的，比如从书籍列表渲染，就给每个项加个状态属性：

@foreach (var book in BookList)
{
    <div class="booksMain" 
         @onclick="() => ToggleBookVisibility(book.Id)"
         style="@(book.IsVisible ? "display:block" : "display:none")">
        <!-- 这里放你的书籍内容 -->
        @book.Title
    </div>
}

@code {
    // 模拟书籍数据，每个项带独立的显示状态
    private List<BookItem> BookList = new()
    {
        new BookItem { Id = 1, Title = "Blazor入门指南", IsVisible = true },
        new BookItem { Id = 2, Title = ".NET进阶实战", IsVisible = true },
        new BookItem { Id = 3, Title = "前端组件设计", IsVisible = true }
    };

    // 切换指定书籍的显示状态
    private void ToggleBookVisibility(int bookId)
    {
        var targetBook = BookList.First(b => b.Id == bookId);
        targetBook.IsVisible = !targetBook.IsVisible;
    }

    // 定义书籍模型，包含状态属性
    private class BookItem
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public bool IsVisible { get; set; }
    }
}

情况2：元素是硬编码的（适合少量固定元素） #

如果是固定的2-3个.booksMain元素，直接给每个元素单独加状态变量就行：

<div class="booksMain" 
     @onclick="() => IsBook1Visible = false"
     style="@(IsBook1Visible ? "display:block" : "display:none")">
    第一本书内容
</div>

<div class="booksMain" 
     @onclick="() => IsBook2Visible = false"
     style="@(IsBook2Visible ? "display:block" : "display:none")">
    第二本书内容
</div>

@code {
    private bool IsBook1Visible = true;
    private bool IsBook2Visible = true;
}

同样用独立状态绑定的思路，给每个按钮维护自己的点击状态，动态切换class：

推荐写法（集合渲染5个按钮） #

@foreach (var btn in ButtonStates)
{
    <button class="btn @(btn.IsClicked ? "btn-success" : "btn-primary")" 
            @onclick="() => ToggleButton(btn.Id)">
        Click Me@btn.Id
    </button>
    <!-- 加个空格分隔按钮 -->
    &nbsp;
}

@code {
    private List<ButtonState> ButtonStates = new()
    {
        new ButtonState { Id = 1, IsClicked = false },
        new ButtonState { Id = 2, IsClicked = false },
        new ButtonState { Id = 3, IsClicked = false },
        new ButtonState { Id = 4, IsClicked = false },
        new ButtonState { Id = 5, IsClicked = false }
    };

    private void ToggleButton(int btnId)
    {
        var targetBtn = ButtonStates.First(b => b.Id == btnId);
        targetBtn.IsClicked = !targetBtn.IsClicked;
    }

    private class ButtonState
    {
        public int Id { get; set; }
        public bool IsClicked { get; set; }
    }
}

硬编码写法（适合少量按钮） #

如果不想用集合，也可以给每个按钮单独加状态变量：

<button class="btn @(IsBtn1Clicked ? "btn-success" : "btn-primary")" @onclick="() => IsBtn1Clicked = !IsBtn1Clicked">Click Me1</button>
<button class="btn @(IsBtn2Clicked ? "btn-success" : "btn-primary")" @onclick="() => IsBtn2Clicked = !IsBtn2Clicked">Click Me2</button>
<!-- 重复到Click Me5 -->

@code {
    private bool IsBtn1Clicked = false;
    private bool IsBtn2Clicked = false;
    private bool IsBtn3Clicked = false;
    private bool IsBtn4Clicked = false;
    private bool IsBtn5Clicked = false;
}

核心逻辑就是：每个需要单独交互的元素，都要有自己的状态变量，通过Blazor的绑定把状态和UI关联起来，这样操作单个元素的状态只会影响它自己，完全不需要依赖JS Interop。

内容的提问来源于stack exchange，提问作者Nairi Areg Hatspanyan