Изменить класс только для выбранного div - PullRequest
Новая
       45

Изменить класс только для выбранного div

0 голосов
/ 19 февраля 2020

Я бы хотел, чтобы он изменил только класс для нажатых div. В настоящее время он изменит класс для всех div с. Я написал это как компонент Blazor. 

@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";
        }
    }
}

Ответы [ 3 ]

1 голос
/ 19 февраля 2020

Попробуйте код: 

@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; }
}
}

Результат кода выше:

enter image description here

Не стесняйтесь задавать вопрос , Удачи.

1 голос
/ 19 февраля 2020

Создайте компонент для этого поведения:

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";
        }
    }
}

Ваш родительский компонент станет:

ParentComponent. бритва 

@for (int i = 0; i < 5; i++)
{
    <CustomComponet Value="@i" />
}
1 голос
/ 19 февраля 2020

Вы можете использовать массив вместо одной переменной. 

@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";
      }
  }
}
...