1

我是 javascript 的新手。问题是，我有多个 textarea 和 div，它们通过带有 ID 的 PHP '回显'（例如 textarea_1、textarea_2 ...），我想做一些事情，比如当 textarea 成为焦点时，只有那个特定的 textarea被聚焦的会向下滑动和扩展。

html

<textarea id="comment_textarea_1"></textarea>
<div id="button_block_1"><button type="submit">Submit</button><button type="submit" id="cancel_1">Cancel</button></div>

<textarea id="comment_textarea_2"></textarea>
<div id="button_block_2"><button type="submit">Submit</button><button type="submit" id="cancel_2">Cancel</button></div>

Javascript

$(document).ready(function () {
    var $this = $(this);
    var $textareaID = $this.attr("id").replace("comment_textarea_");
    var $buttonblockID = $this.attr("id").replace("button_block_");
    var $cancelID = $this.attr("id").replace("cancel_");

    var $textarea = $('#'+$(textareaID));
    var $button = $('#'+$(buttonblockID));
    var $cancel = $('#'+$(cancelID));

$textarea.focus(function(){

    $textarea.animate({"height": "85px",}, "fast" );
    $button.slideDown("fast");
    return false;
});

    $cancel.click(function(){
    $textarea.animate({"height": "18px",}, "fast" );
    $button.slideUp("fast");
    return false;
});
});

谢谢！

4

3 回答 3

1

我在代码中解释了它。试试这个。

$(document).ready(function () {
   // select all the textareas which have an id starting with 'comment_textarea'
   var $textareas = $("textarea[id^='comment_textarea']");
   $textareas.on("focus",function(){
      // now $(this) has the focused element
      $(this).animate({"height": "85px",}, "fast" );
      // find the button block of this div and animate it
      $("div[id^='button_block']",$(this)).slideDown("fast");
   });

   $textareas.on("focusout",function(){
      // now $(this) has the focused out element
      $(this).animate({"height": "18px",}, "fast" );
      // find the button block of this div and animate it
      $("div[id^='button_block']",$(this)).slideUp("fast");
   });
});
于 2012-05-29T05:34:25.717 回答
0

我相信我明白你在尝试什么。请让我知道以下是否是您所追求的效果：

$("[id^='comment_textarea_']").on({
    focus: function(){
        $(this).stop().animate({ height: '85px' }, 750).next().slideDown();
    },
    blur: function(){
        $(this).stop().animate({ height: '20px' }, 250).next().slideUp();
    }        
});​

小提琴：http: //jsfiddle.net/pwype/2/

于 2012-05-29T05:34:09.370 回答
0

我很困惑。上面的答案集中在使用 ID 上……我上次检查这是我们拥有类属性的主要原因之一？

例如：

$(document).ready(function() 
{
    $('.comment-textarea').focus(function()
    {
        $(this).animate(
        {
            'height' : '85px'
        }, 'fast');
        $(this).next('.button-block').slideDown('fast');
    }).blur(function()
    {
        $(this).animate(
        {
            'height' : '18px'
        }, 'fast');
        $(this).next('.button-block').slideUp('fast');
    });
});

和 HTML：

<textarea id="comment_textarea_1" class="comment-textarea"></textarea>
<div id="button_block_1" class="button-block"><button type="submit">Submit</button><button type="submit" id="cancel_1">Cancel</button></div>

<textarea id="comment_textarea_2" class="comment-textarea"></textarea>
<div id="button_block_2" class="button-block"><button type="submit">Submit</button><button type="submit" id="cancel_2">Cancel</button></div>

和一个小小提琴来展示它的工作原理：

http://jsfiddle.net/ngYMh/

于 2012-05-29T08:43:42.930 回答