1

私はJavaScriptをまったく使用していません。問題は、複数のtextareaとdivがあり、それらがPHPを介してID（たとえば、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 の使用に集中しています... 最後にこれを確認したとき、class 属性を持っている主な理由の 1 つは?

例えば：

$(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 に答える