Foreach loop - скрыть/показать на основе события click jquery

Question

У меня есть список записей на моем экране, используя foreach. Теперь я хочу скрыть/показать текстовое поле на основе события клика на изображении. Мой код выглядит следующим образом:

@foreach (var dateitem in list) 
{ 
    <td style="width:6%;" id="HoursTxt"> 
     @Html.TextBoxFor(modelitem => dateitem.Hours, new { id = string.Format("txtHours"), style = "width:60%;" }) 
     <img id=@( dateitem.Project_Id + "_" + dateitem.Task_Id + "_" + "C" + "_img") src="~/Images/comment.png" onclick="GetComments(this.id);" /> 
     <div id=@( dateitem.Project_Id + "_" + dateitem.Task_Id + "_" + "C") style="border:solid;display:none;"> 
      <textarea id=@( dateitem.Project_Id + "_" + dateitem.Task_Id + "_" + "C" + "_text") style="position:absolute;" class="MyComment"></textarea>                           
     </div> 
    </td> 
} 

, когда я нажимаю на второй, третий изображения в этой строке, она показывает текстовое поле под только первый текстовое поле. Моя функция следующая:

function GetComments(id) { 

    var prev; var strid = id; 
    prev = strid.replace("_img", '');// alert(prev); 

    //document.getElementById(prev).style.display = 'block'; 
    if (document.getElementById(prev).style.display == 'block') 
    { 
     document.getElementById(prev).style.display = 'none'; 
    } 
    else if (document.getElementById(prev).style.display == 'none') 
    { 
     document.getElementById(prev).style.display = 'block'; 
    } 

} 

Может ли кто-нибудь помочь мне решить эту проблему? Я хочу, чтобы скрыть/показать текстовое поле каждый раз, ниже конкретного текстового поля .. спасибо заранее ..

Answer 1

Это будет очень просто с использованием jQuery. Во-первых дать вашим изображениям класса, например: prev

Затем в document.ready функции:

$('.prev').on('click', function() { 
    // this is the current image clicked, 
    // .next() gets the sibling element that is directly after the current element 
    // .toggle toggles the visibility 
    $(this).next().toggle(); 
}); 

Answer 2

ОБНОВЛЕНО

я не уверен, но попробуйте отправить только onclick="GetComments(this); и в JS:

function GetComments(_this) { 
    var targetedDiv = $(_this).parents('td').find('div'); 

    if ($(targetedDiv).css('display') == 'block') 
    { 
     $(targetedDiv).css('display','none'); 
    } 
    else 
    { 
     $(targetedDiv).css('display','block'); 
    } 
}