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

回答

相關問題