Как я могу назначить индивидуальный идентификатор для каждой складной карты? (Bootstrap / C# / HTML) - PullRequest
Новая
       31

Как я могу назначить индивидуальный идентификатор для каждой складной карты? (Bootstrap / C# / HTML)

1 голос
/ 17 апреля 2020

В настоящее время у меня есть список дел с каждым элементом, который можно щелкнуть, который (после нажатия) откроет складную карту, отображающую эти конкретные категории, подкатегории. Тем не менее, после нажатия не имеет значения, по какому элементу щелкнули, все списки категорий будут свернуты одновременно. Однако я предполагаю, что это будет связано с тем, что идентификатор div с переключателем данных связан с идентификатором div коллапса, отвечающего за показ карт, поэтому не имеет значения, по какой категории нажимают, тем не менее, их div будет связан со всеми остальными категориями, в результате чего в них все открываются одновременно.

Я хочу иметь возможность назначить уникальный идентификатор, который позволит каждой карточке открываться индивидуально при нажатии на эту конкретную категорию. Хотя я действительно не уверен в том, как можно go поступить таким образом?

Ниже приведен скриншот списка дел в его нынешнем виде, надеюсь, он сможет обеспечить некоторый дополнительный контекст в этом вопросе;

enter image description here

Чтобы уточнить, скажем, я должен был нажать на «Работа в университете», это должно свернуть только его поле, но вместо этого в данный момент оно сворачивает коробку для всех категорий (домашняя работа, бакалейные товары, доставка и т. д. c ..)

Ниже приведен код, который у меня есть; 

<div class="categoryList">

        @result
        @if (result == "")
        {
            foreach (String dataLine in userData)
            {

                <p>
                    <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">

                        @dataLine.Split(delimiterChar)[0]

                    </a>

                    <button class="btn" id="@dataLine.Split(delimiterChar)[1]"><i class="fas fa-plus secondaryPlusIcon" id="@dataLine.Split(delimiterChar)[1]"></i></button>
                    <button class="btn" id="@dataLine.Split(delimiterChar)[1]"><i class="far fa-edit secondaryEditIcon" id="@dataLine.Split(delimiterChar)[1]"></i></button>
                    <button class="btn" id="@dataLine.Split(delimiterChar)[1]"><i class="far fa-trash-alt secondaryDeleteIcon" id="@dataLine.Split(delimiterChar)[1]"></i></button>

                </p>

                <div class="collapse" id="collapseExample">
                    <div class="card card-body w-25 p-3 collapsible">
                        @dataLine.Split(delimiterChar)[1] / Sub-category <!-- The ID value (Value after the delimiter) This ID value is associated to each category listed above-->
                    </div>
                </div>

            }

        }
    </div>

Любая помощь по этому вопросу будет с благодарностью, спасибо:)

...