Javascript处理多个ID

我是全新的JavaScript。问题是，我有多个textarea和div，它们通过带有ID的PHP（例如textarea_1，textarea_2 ...）进行echo'-ed编辑，并且我想要做类似的事情，当textarea处于焦点时，只有特定的textarea重点将会下滑并扩大。Javascript处理多个ID

的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; 
}); 
});

谢谢！

来源

2012-05-29 user1422866

那么什么是麻烦？你忘了问一个问题。 – JohnFx

奥普对不起。当焦点时，textarea不会滑落。主要问题是我有两个相同的textareas具有不同的ID（如上所示），但我需要JavaScript来处理两个textareas，尽管两个textareas都有不同的ID。 @@ – user1422866

我在代码解释它。尝试这个。

$(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-29 05:34:25

谢谢！这对我来说非常适合！ – user1422866

不客气。 –

请接受你的答案。 –

我相信我明白你在尝试什么。请让我知道，如果下面是你后的效果：

$("[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-29 05:34:09 Sampson

我很困惑。上面的答案都集中在使用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-29 08:43:42 Gavin

Javascript处理多个ID

回答

相关问题