Показывать общее описание при нажатии кнопки

Question

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

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.

Answer 1

Попробуйте найти классы в родителю текущей кнопки, как это -

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

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

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

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