如何使用jQuery在循环中显示/隐藏文本区域 - How to show/hide textareas in a loop with jQuery?

How to show/hide textareas in a loop with jQuery?

在下面的例子中，我有一个脚本的循环，从数据库中获取评论，并给每个评论一个表单与文本区和提交按钮，以便用户可以与每个评论单独交互。

由于文本区域的重复，下面的代码使页面看起来非常混乱和令人不安。

我需要的是一个jQuery代码，将隐藏文本区域，并允许我显示一个选定的文本区域单独当一个链接或div被点击。我将在下面的代码中简化我想要的内容。

<?php
$comments = array('comment1','comment2','comment3','comment4','comment5','comment6','comment7','comment8','comment9');
$c_count = count($comments);
for($i=0; $i<$c_count; $i++){
    $comment = $comments[$i];
    echo $comment;
?>
    <hr />
    <div style="border:1px solid #999; width:200px;">Click Here to Show Reply Form</div>
    <div class="comment_box">
        <form action="path/to/insert_reply.php" method="POST">
            <textarea name="reply" cols="47" rows="4"></textarea>
            <input type="submit" name="submit" value="Post Reply">
        </form>
    </div>
<?php
}
?>

这可以很容易地用JQuery完成。http://api.jquery.com/会很有帮助。

在本例中，客户端可以单击comment_headerdiv来查看或隐藏评论框。注意，我在div中添加了一个额外的标识符。选择单个div元素有许多不同的方法—您可以考虑将comment_header和comment_boxdiv都包装在具有唯一id属性的容器div下。这里，我选择使用JQuery的.data()功能。

PHP:

<?php
$comments = array('comment1','comment2','comment3','comment4','comment5','comment6','comment7','comment8','comment9');
$c_count = count($comments);
for($i=0; $i<$c_count; $i++){
  $comment = $comments[$i];
  echo $comment;
?>
  <hr />
  <div data-index="<?= $i; ?>" style="border:1px solid #999; width:200px;">Click Here to Show Reply Form</div>
  <div id="<?= $i; ?>" class="comment_box">
    <form action="path/to/insert_reply.php" method="POST">
      <textarea name="reply" cols="47" rows="4"></textarea>
      <input type="submit" name="submit" value="Post Reply">
    </form>
  </div>
<?php
}
?>

JS/JQuery:

$(document).ready(function(e) {
  $('.comment_box').hide();
  $('.comment_header').on('click', function(e) {
      $('#' + $(this).data('index')).toggle();
  });
});

希望这是有帮助的。下面是JSFiddle: http://jsfiddle.net/EUQG2/

在特定文本区域聚焦时隐藏未选中的textarea

$(document).ready(function(){
    $('textarea').focus(function(){
        $('textarea').not(this).hide();
    });
});

你可以玩这个。希望对大家有所帮助

最简单的情况是，假设您想要做的是隐藏textarea元素(在本例中是隐藏父.comment_box元素)，并通过单击前面的div元素来显示它们:

$('.comment_box').hide().prev('div').on('click', function(){
    $(this).next('.comment_box').toggle();
});

JS Fiddle demo.

如果您想在任何给定点只看到一个.content_box/textarea:

$('.comment_box').hide().prev('div').on('click', function(){
    var target = $(this).next('.comment_box');
    $('.comment_box').not(target).hide();
    target.toggle();
});

JS Fiddle demo.

引用:

hide() .
next() .
not() .
on() .
prev() .
toggle() .