Change class for selected div only

问题

I would like it to only change the class for the clicked div. Currently it will change the class for all divs. I have written this as a Blazor component.

@for (int i = 0; i < 5; i++)
{
    <div class="@divClass" @onclick="_ => ChangeDivClass()">@i</div>
}

@code 
{    
    String divClass;

    private void ChangeDivClass()
    {
        if (divClass == "red")
        {
            divClass = String.Empty;
        }
        else
        {
            divClass = "red";
        }
    }
}

回答1:

You can use an array instead of one variable.

@for (int i = 0; i < divClass.Length; i++)
 {
   var index = i;
   <div class="@divClass[i]" @onclick="_ => ChangeDivClass(index)">@i</div>
 }

@code 
 {    
   string[] divClass= new string[5];

   private void ChangeDivClass(int i)
    {
     if (divClass[i] == "red")
      {
        divClass[i] = String.Empty;
      }
     else
      {
        divClass[i] = "red";
      }
  }
}

回答2:

try below code:

@if (items != null)
{
    @foreach (var item in items)
    {
        <div class="@RenderDomClass(item.Id)" @onclick="_ => ChangeColor(item.Id)">@item.Id</div>
    }
}

@functions{
    //Instead of these Mock data you should load your own data
    IList<Foo> items = new List<Foo>()
         {
            new Foo { Id =1, DomClasses=new List<string>(){string.Empty}},
            new Foo { Id =2, DomClasses=new List<string>(){string.Empty}},
            new Foo { Id =3, DomClasses=new List<string>(){string.Empty}},
            new Foo { Id =4, DomClasses=new List<string>(){string.Empty}},
            new Foo { Id =5, DomClasses=new List<string>(){string.Empty}},
            new Foo { Id =6, DomClasses=new List<string>(){string.Empty}},

        };

private void ChangeColor(int id)
{
    var domClasses = items.SingleOrDefault(item => item.Id == id).DomClasses;
    if (domClasses.Contains("red"))
    {
        domClasses.Remove("red");
    }
    else
    {
        domClasses.Add("red");
    }

    RenderDomClass(id);
}

private string RenderDomClass(int id)
{
    var domClass = string.Empty;
    var domClasses = items.SingleOrDefault(item => item.Id == id).DomClasses;
    if (domClasses.Count > 0)
    {
        foreach (var item in domClasses)
        {
            domClass += $" {item}";
        }
    }

    return domClass;
}


public class Foo
{
    public int Id { get; set; }
    public List<string> DomClasses { get; set; }
}
}

The result of the above code is:

Fell free to ask question. Good Luck.

回答3:

Create a component for this behavior :

CustomComponent.razor

<div class="@divClass" @onclick="ChangeDivClass">@Value</div>
@code 
{    
    [Parameter]
    public int Value;

    string divClass;

    private void ChangeDivClass()
    {
        if (divClass == "red")
        {
            divClass = string.Empty;
        }
        else
        {
            divClass = "red";
        }
    }
}

Your parent component become:

ParentComponent.razor

@for (int i = 0; i < 5; i++)
{
    <CustomComponet Value="@i" />
}

回答4:

Note: I've used buttons instead of divs, but the principal remains the same

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

 @code {
List<SelectedButton> items = Enumerable.Range(1, 5).Select(i => new 
                SelectedButton { ID = i, Shown = false }).ToList();

public class SelectedButton
{
    public int ID { get; set; }
    public bool Shown { get; set; }
    public string Class => Shown ? "red" : "";
}
}

Hope this helps...

来源：https://stackoverflow.com/questions/60295220/change-class-for-selected-div-only