Blazor, как добавить / удалить класс только для одного элемента с тем же классом, а не для всех - PullRequest
Новая
       86

Blazor, как добавить / удалить класс только для одного элемента с тем же классом, а не для всех

0 голосов
/ 19 июня 2020

Я новичок в blazor. У меня есть 2 (или более) элемента с одним и тем же классом booksMain Я хочу, чтобы они исчезали при нажатии. Как я могу добавить класс по щелчку или css, но я хочу добавить только тот, который щелкнул, а не все booksMain -s

Возможно ли без JS Interop

enter image description here

и

enter image description here

Другой пример

Just 5 buttons with same class and color

<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>

Как заставить это работать?

1 Ответ

2 голосов
/ 19 июня 2020 
@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] = "";
        }
    }
  }

приложение. css или стиль. css

.blue {
    background-color: blue;
}

Надеюсь, это поможет ..

...