У меня есть интерфейс, где есть более трех 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.
Попробуйте найти классы в родительской части текущей кнопки, например:
$(function () {
$(".parahide1").hide();
$("#read").on('click',function () {
$(this).parent().find(".parahide").hide();
$(this).parent().find(".parahide1").show();
});
});
Следовательно, только div
присутствующий в текущей родительской кнопке, будет скрыт или показан!
Подробнее о .parent() и .find()
Также используйте .on() вместо.live(), поскольку live устарел.
on
потребует как минимум jquery 1.7. Поскольку live
работает, используется более старая версия jquery, которую необходимо обновить!