Отображение общего описания при нажатии кнопки

0

У меня есть интерфейс, где есть более трех div, которые имеют данные с разными идентификаторами, но с общей кнопкой, называемой "Чтение". Я отобразил сообщения, в которых я сохранил тело сообщения как крошечное (15) на этом Прочитайте эту кнопку, чтобы показать мне весь текст сообщения. Как достичь этого одним из способов, который я пытаюсь сделать, является следующее:

foreach (var item in Model.MyNote)
    {

    <div class="row">
        @if (item.Owner.Roles.Any(cx => cx.RoleName == "Customer"))
        {
            <div class="panel">
                <div class="row">
                    <div class="three columns">
                        <img src="@Request.Url.FormatAbsoluteUrl(@item.Owner.Personal.ImageURL)" />
                        <span style="text-align: center;">
                            @item.Owner.Personal.FirstName  @item.Owner.Personal.LastName
                        </span>
                    </div>
                    <div class="nine columns">
                        <input type="hidden" value="@item.Id" id="messid" />
                        <p class="parahide1">@item.Description </p>
                        <p class="parahide">@item.Description.ToTiny(15) </p>
                    </div>
                    @*<a href="@Url.Action("Read", "Appointment", new { @id = item.Id })" class="button" id="read">Read</a>*@
                    <button class="button" id="read">Read</button>

                </div>
            </div>
        }
        else if (item.Owner.Roles.Any(cx => cx.RoleName == "Professional"))
        {

            <div class="panel">
                <div class="row">
                    <div class="nine columns">
                        <p>@item.Description </p>
                    </div>
                    <div class="three columns">
                        <img src="@Request.Url.FormatAbsoluteUrl(@item.Owner.Professional.ImageURL)" />
                        <span style="text-align: center;">@item.Owner.Professional.CompanyName</span>
                    </div>
                </div>
                <a href="@Url.Action("Read", "Appointment", new { @id = item.Id })" class="button">Read</a>
            </div>                                                  
        }
    </div>  

    <script type="text/javascript">
    $(function () {
        $(".parahide1").hide();
        $("#read").live('click',function () {
            $(".parahide").hide();
            $(".parahide1").show();
        });
    });
</script>

    }

Это дает результат, но он показывает описание всех div, даже если я нажимаю кнопку первого div.

  • 1
    .live () устарела, используйте вместо нее .on ()
  • 0
    нет, я получаю тот же результат
Показать ещё 1 комментарий

1 ответ

0

Попробуйте найти классы в родительской части текущей кнопки, например:

$(function () {
    $(".parahide1").hide();
    $("#read").on('click',function () {
        $(this).parent().find(".parahide").hide();
        $(this).parent().find(".parahide1").show();
    });
});

Следовательно, только div присутствующий в текущей родительской кнопке, будет скрыт или показан!

Подробнее о .parent() и .find()

Также используйте .on() вместо.live(), поскольку live устарел.

  • 0
    Использование on потребует как минимум jquery 1.7. Поскольку live работает, используется более старая версия jquery, которую необходимо обновить!
  • 0
    это работает только для первого div ... не для других ..
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню