как повлиять на стиль каждого элемента (CSS) отличается от другого элемента внутри оператора foreach - PullRequest
Новая
       6

как повлиять на стиль каждого элемента (CSS) отличается от другого элемента внутри оператора foreach

0 голосов
/ 18 февраля 2019

я использовал оператор «foreach» для доступа ко всем элементам IEnumerable и представления его на странице подробностей .... и я хочу, чтобы цвет фона каждого элемента отличался от других элементов .... поэтому я использовал случайный цветовой процессиспользование jQuery для воздействия на каждый элемент .... но когда я запускаю код, все элементы стали одного цвета ..... как воздействовать на каждый элемент в отдельности и сделать его цвет другим?

здесьHTML-код: 

@foreach (var item in Model.TimeLines)
{
    <section id="timeline">
        <article>
            <div class="inner">
                <span class="date">
                    <span class="day">@item.EventDate</span>
                </span>
                <h2>@item.Title</h2>
                <p>@item.Body</p>
                <div class="form-group row col-lg-12">
                    @*<div class="button_cont row col-lg-6" align="center"><a asp-action="Edit" asp-controller="TimeLines" asp-route-id="@item.Id" class="example_c" noopener">Edit</a></div>*@
                    <div class="button_cont row col-lg-6" align="center"><a asp-controller="TimeLines" asp-action="Delete" asp-route-id="@item.Id" style="cursor:pointer;" class="example_c" id="del">حذف</a></div>
                    <div class="button_cont row col-lg-6" align="center"><a asp-controller="TimeLines" asp-action="Edit" asp-route-id="@item.Id" style="cursor:pointer;" class="example_c">تعديل</a></div>
                </div>
            </div>
        </article>
    </section>
}

и код JQuery: 

<script>
    var items = ['FFFFCC', 'FFFF99', 'FFFF66', 'FFFF33', 'FFFF00', 'CCCC00', 'FFCC66', 'FFCC00', 'FFCC33', 'CC9900', 'CC9933', '996600', 'FF9900', 'FF9933', 'CC9966', 'CC6600', '996633', '663300', 'FFCC99', 'FF9966', 'FF6600', 'CC6633', '993300', '660000', 'FF6633', 'CC3300', 'FF3300', 'FF0000', 'CC0000', '990000', 'FFCCCC', 'FF9999', 'FF6666', 'FF3333', 'FF0033', 'CC0033', 'CC9999', 'CC6666', 'CC3333', '993333', '990033', '330000', 'FF6699', 'FF3366', 'FF0066', 'CC3366', '996666', '663333', 'FF99CC', 'FF3399', 'FF0099', 'CC0066', '993366', '660033', 'FF66CC', 'FF00CC', 'FF33CC', 'FF33CC', 'CC0099', '990066', 'FFCCFF', 'FF99FF', 'FF66FF', 'FF33FF', 'FF00FF', 'CC3399', 'CC99CC', 'CC66CC', 'CC00CC', 'CC33CC', '990099', '993399', 'CC66FF', 'CC33FF', 'CC00FF', '9900CC', '996699', '660066', 'CC99FF', '9933CC', '9933FF', '9900FF', '660099', '663366', '9966CC', '9966FF', '6600CC', '6633CC', '663399', '330033', 'CCCCFF', '9999FF', '6633FF', '6600FF', '330099', '330066'
    ];

    var item = items[Math.floor(Math.random() * items.length)];
    $('section#timeline article:nth-child(1) div.inner h2').css('background-color', '#' + item);
</script>

1 Ответ

0 голосов
/ 18 февраля 2019

Прежде всего, смотрите @ carsten-løvbo-andersen комментарий об id.Предполагая, что это исправлено ...

Вы не очень далеко.Но вам нужно пройтись по этим статьям и установить цвет каждой из них.Прямо сейчас вы просто устанавливаете цвет ребенка 1. 

var items = ...

$('section article').each(function(i, element){
    var item = items[Math.floor(Math.random() * items.length)];
    $(element).find('div.inner h2').css('background-color', '#' + item);
});
...