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并更改其兄弟输入按钮

回答

相关问题