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

Jクエリ

     $(".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のテキストボックスが消えます。このページの機能を複製しようとしています。

フィドルhttp://jsfiddle.net/rgmtF/16/を作成しました

4

6 に答える 6

3

commentContainer レベルで「選択された」状態を表す新しい css クラス、つまり 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

  ...
};
于 2012-04-29T06:35:25.273 に答える
2

最初に応答領域を作成してから、それらのノードを対応する領域に移動する方がはるかに簡単です。これにより、コードが大幅に簡素化され、変更を加えるとスケーリングが向上します。

上記のコードで言及されているのは、どのコメントがどれであるかを示す、事前入力された多くの ID です。これは複数のコメントへの返信に使用されるものではないため、これらの ID を利用する意味がわかりません。私が提案したいのは、コメント エリアのフィールドを静的に保ち、隠しフィールドを使用して、返信しているコメントを示すことです。

これを素敵な関数でラップすることもできますが、原則は同じです。

別の HTML を使用するサンプルを作成しましたが、最も最小限の方法でアイデアを示していると思います。

http://jsfiddle.net/ubTDD/1/ (このフィドルは十分に文書化されています)

于 2012-04-30T13:57:09.127 に答える
0

たぶん、次
のマナーでそれを回避することができます：1。返信ボタンの分割、名前を付けます。たとえば<input id="<%:rid %>" type="button" value="Reply" class="btnReply"/>
、2。非表示にするtextareaの分割、クラス名を指定します。ex-「textarea」の場合。

今、私は次のマナーに行きます：

$(".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
      }
      ....
      ....
});
于 2012-04-28T23:00:12.653 に答える
0 
$('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();
}
于 2012-05-05T11:13:11.273 に答える
0

すべてのテキストボックスに共通のクラス名を追加するか、ページに表示される返信ボタンに関連するすべてのテキストボックスを対象とする jquery セレクターを用意してから、共通のクラス名またはセレクターを使用して、特定のテキストボックスを表示する前にすべてのテキストボックスを非表示にします。クリックされた返信ボタンに関連します。

問題が解決することを願っています。

于 2012-04-30T11:37:49.053 に答える
0

返信ボタンがクリックされたときに以前に表示されていたすべてのテキスト ボックスを非表示にする場合は、クリック イベントに 1 行のコードを追加するだけです。たとえば、メイン コンテナの div id は「master」です。

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

クラス名を使用して、テキスト ボックスを含む要素の完全なブロックを非表示にすることをお勧めします。

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

サンプルコードは次のようになります

$(".commentbox .btnReply").live("click", function () {
      $(".tablecontent").hide();
      $(this).hide();
      ....
});
于 2012-04-25T18:56:10.930 に答える