JQuery：選擇以特定名稱結尾的所有ID並更改其兄弟輸入按鈕

我試圖表明文本不能發送，顯示灰色輸入提交按鈕與類btn-primary。相反，btn-default是一個彩色輸入按鈕。但是，在一個站點上有很多textareas，因爲我的JQuery代碼應該用於發佈新狀態並評論幾個狀態條目（如在Facebook中）。JQuery：選擇以特定名稱結尾的所有ID並更改其兄弟輸入按鈕

這就是爲什麼發佈一個新的狀態有一個唯一的ID名爲status_textarea和評論textarea有一個像comment_textarea39例如id。所以在評論textareas結尾處總會有一個數字。這是我的第一個問題就是我的代碼：

$('[id$=_textarea]').on('click contextmenu keyup blur', function(e) { 
    var text = $(this).val(); 
    var button = $(this).parent().hasClass('btn-primary'); 
    button.val(123); // Test to find the input button 

    if (text.length < 1) $(button).removeClass('btn-default').addClass('btn-primary'); 
    else $(button).removeClass('btn-primary').addClass('btn-default'); 
});

我可以選擇與本我的狀態textarea的，但不是我的評論文字區域（一個或多個），因爲這些有一個id在最後就像我提到的（例如：comment_textarea39）。所以我需要一個像通配符選擇的東西，它只搜索：以_textarea結尾的ID並忽略該ID在之後命名的內容。

然後我也想選擇下一個輸入（最近「這個」 textaera之後）具有類btn-primary將其切換到btn-default。

EDIT

HTML示例：

狀態撰寫文本區域：

<form id="statusForm"> 
<input type="hidden" name="privacy" value="0" autocomplete="false"> 
<textarea id="status_textarea" name="text" style="min-height:55px"></textarea> 
<input id="status" data-case="status" data-form="#statusForm" type="submit" class="modal-send mt15 mb15 btn btn-primary" value="Senden" autocomplete="false"> 
</form>

註釋文本區域：

<form id="commentForm82"> 
<textarea id="comment_textarea82" name="text" class="comment mb15" placeholder="Hier kommentieren..."></textarea> 
<input type="hidden" name="log_id" value="82" autocomplete="false"> 
<input id="comment" data-case="comment" data-form="#commentForm82" data-hide="1" data-hide-success="1" type="submit" class="modal-send pull-right btn btn-default" value="Senden">   
</form>

來源

2015-06-22 AlexioVay

可以共享HTML樣品 –

在第一種情況下，有一個隱藏的'input'你想改變它的類：如果它在地圖的模式匹配？在第二種情況下哪些輸入的類必須更改 –

對不起，我剛更新了HTML，我在代碼中犯了一個錯誤，發送按鈕超出了表單的範圍。因爲我正在使用ajax，它仍然有效，我沒有注意到。不過，我只需要找到最接近的輸入按鈕，其類別爲'btn-primary'或'modal-send'。這是發送按鈕。 @ArunPJohny – AlexioVay

使用attribute contains selector而不是ends with selector因爲你有一個動態部分的id屬性

$('[id*=_textarea]')

另一個更好的選擇將是年底是使用一類選擇，即像textarea一個共同的類分配給所有元素需要進行選擇，然後使用

$('.textarea')

來源

2015-06-22 03:53:30

謝謝，我將它改爲了課堂。你能解釋爲什麼我應該使用class而不是id，即使id名稱是唯一的嗎？這是關於加載時間還是類似的東西？現在我只需要找出如何找到我正在搜索的輸入按鈕。你有什麼建議嗎？我編輯了我的問題以顯示HTML示例代碼。 – AlexioVay

類選擇器比屬性選擇器更快，這就是類建議的原因 –

@Vaia http://jsfiddle.net/arunpjohny/5rh5f2jp/3/ –

我會建議你使用通用類綁定事件，即增加一類，如yourClass那麼你可以使用類選擇

$(".yourClass").on('click contextmenu keyup blur', function(e) { 
});

然而，使用Attribute Contains Selector [name*=」value」]綁定事件和.find()事件處理程序中，以確定input代替hasClass()

$('[id*=_textarea]').on('click contextmenu keyup blur', function(e) { 
    var text = $(this).val(); 

    //Important: Notice Here 
    //Use find as hasClass returns you true/false not element 
    var button = $(this).parent().find('btn-primary'); 

    if (text.length < 1) { 
     $(button).removeClass('btn-default').addClass('btn-primary'); 
    } else { 
     $(button).removeClass('btn-primary').addClass('btn-default') 
    }; 
});

來源

2015-06-22 03:55:25 Satpal

謝謝，我將它改爲了類。你能解釋爲什麼我應該使用class而不是id，即使id名稱是唯一的嗎？這是關於加載時間還是類似的東西？是的，現在我只需要找出如何找到我正在搜索的輸入按鈕。你有什麼建議嗎？ – AlexioVay

@Vaia，類選擇器更快，也可以將事件關聯到不需要的元素 – Satpal

對於那些比較老套，只是搜索每個textarea的所有包含「textarea的」一個id，回報

var theseTextAreas = $('textarea').map(function(){ 
    if ($(this).attr('id').indexOf('textarea') > -1) 
    { 
     return $(this); 
    } 
});

來源

2015-06-22 04:16:48 oMiKeY

這對於搜索類「textarea」會不會比較慢？我只是更新它找到類textarea而不是id，因爲我發現類比id更快。 – AlexioVay

JQuery：選擇以特定名稱結尾的所有ID並更改其兄弟輸入按鈕

回答

相關問題