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>
}

当我点击该行中的第二张，第三张图片时，它只在第一个文本框下显示textarea。我的功能如下：

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';
    }

}

任何人都可以帮我解决这个问题吗？我想隐藏/显示textarea，每次都在特定的文本框下面。提前谢谢..

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');
    }
}

Foreach循环 - 基于click事件jquery隐藏/显示

2 个答案: