Question

<%foreach (var commentitem in item.commentsModelList)
   {
        var containerId = "comment-" + commentitem.CommentId;%>
       <div id="commentContainer1">
       <div id="<%:containerId %>">
       <table border="0"  class="commentbox">

        <%var rid = "btnReply-" + commentitem.CommentId;
          var replyContainer = "container-" + commentitem.CommentId;%>
       <tr>

        <td> 
         <div id="<%:replyContainer %>">
          <input id="<%:rid %>" type="button" value="Reply" class="btnReply"/>
          </td>
       </tr>
    </table>
 </div>
</div>
  <%} %>

JQUERY

     $(".commentbox .btnReply").live("click", function () {
            $(this).hide();
        var id = $(this).attr("id").split("-");
            alert(id);
            id.shift();
            alert(id);
            var newString = id.join('-');
            alert(newString);


            var $table = $('<table/>').addClass('tablecontent');
            $table.append(
                        $('<tr>').append($('<td>').append($input))
                             );

被修改

            $($table).insertAfter("#container-" + newString).show();
        //     $("#container-" + newString).append($table);
        });

当单击一个div中的回复按钮时，会出现文本框但是当单击另一个div中的回复按钮时，我希望前一个div中的文本框消失。我正在尝试复制functionality on this page。

我创建了小提琴http://jsfiddle.net/rgmtF/16/

Answer 1

为什么不在commentContainer级别引入一个新的css类来表示“selected”状态，即addClass（“selected”）。

点击回复

$(".commentbox .btnReply").live("click", function(){
  $('.commentContainer.selected').hide();  //hide previously selected comment divs if any
  $(this).parents('.commentContainer').addClass('selected');  //mark current as selected

  ...
};

Answer 2

更容易的是首先创建回复区域，然后将这些节点移动到相应的区域。这将大大简化您的代码，并在您进行更改时更好地扩展。

在上面的代码中提到的是许多预先填充的id，它表示哪个注释是哪个。我没有看到使用这些id的任何意义，因为这不是用于回复多个评论的东西。我建议将注释区域字段保持为静态，并使用隐藏字段来表示您要回复的注释。

你可以将它包装在一个很好的函数中，但原理仍然是相同的。

我创建了一个使用不同HTML的示例，但我认为以最小的方式说明了这个想法。

http://jsfiddle.net/ubTDD/1/ （这个小提琴记录很多）

Answer 3

如果要在单击“回复”按钮时隐藏所有以前可见的文本框，只需在单击事件中添加一行代码即可。例如，主容器div id是“master”

$("#master input[type=text]").hide();

最好是通过类名隐藏包括文本框在内的完整元素块。

$(".tablecontent").hide();

示例代码看起来像

$(".commentbox .btnReply").live("click", function () {
      $(".tablecontent").hide();
      $(this).hide();
      ....
});

Answer 4

也许你可以在下面的mannar中解决这个问题：
1.给出回复按钮的分区，一个名字。对于前<input id="<%:rid %>" type="button" value="Reply" class="btnReply"/>
2.给你要隐藏的textarea划分一个类名。对于ex-“textarea”。

现在我会进入下面的mannar：

$(".commentbox .btnReply").live("click", function () {
      if ($('.textarea').is(':hidden')) {
         alert("Textarea is already hidden"); //check if already hidden
      } else {
         $('.textarea').hide();   //if not, then hide the textarea
      }
      ....
      ....
});

Answer 5

只需在所有文本框中添加一个公共类名，或者使用一些jquery选择器，它指向与页面上显示的回复按钮相关的所有文本框，然后使用公共类名或选择器在显示之前首先隐藏所有文本框与点击的回复按钮相关的具体内容。

希望它能解决你的问题。

Answer 6

$('your-button-selector').click(function(){
  $('your-textbox-selector').slideUp();
  //$('your-textbox-selector').slideToggle();//use this to toggle show and hide
});

或使用：

<input type="button" name="sample-button" onclick="hideTextbox('textbox-selector')"/>
function hideTextbox(selector){
  $(selector).hide();
  //$(selector).slideToggle();
}

通过单击另一个div中的按钮隐藏一个div中的文本框

6 个答案: