JQuery: Select 所有以特定名称结尾的 ID 并更改其兄弟输入按钮

Question

我正在尝试指示暂时无法发送文本，显示带有 class btn-primary 的灰色输入提交按钮。相反 btn-default 是一个彩色输入按钮。然而，一个站点上有许多文本区域，因为我的 JQuery 代码应该用于发布新状态和评论多个状态条目（如在 Facebook 中）。

这就是为什么发布新状态有一个名为 status_textarea 的唯一 ID，而评论文本区域有一个像 comment_textarea39 这样的 ID。所以评论文本区域的末尾总是有一个数字。这就是我的代码的第一个问题：

$('[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');
});

我可以 select 我的状态文本区域，但不是我的评论文本区域，因为它们像我提到的那样在末尾有一个 id（例如：comment_textarea39）。所以我需要类似通配符 selection 的东西，它只搜索：id 以 _textarea 结尾并忽略 id 之后命名的内容 .

然后我还想 select 具有 class btn-primary 将其切换为 btn-default.

编辑

HTML 示例：

状态Post文本区域：

<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>

Answer 1

使用 attribute contains selector instead of ends with selector 因为在 id 属性末尾有一个动态部分

$('[id*=_textarea]')

另一个更好的选择是使用class选择器，即为所有需要选择的元素分配一个公共class，如textarea，然后使用

$('.textarea')

Answer 2

我建议你使用一个普通的class来绑定事件，即添加一个class比如yourClass然后你可以使用class选择器

$(".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')
    };
});

Answer 3

对于那些更老式的，只需在每个文本区域中搜索一个包含 'textarea' 的 id，return 如果它与 MAP 中的模式匹配：

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

JQuery: Select 所有以特定名称结尾的 ID 并更改其兄弟输入按钮

JQuery: Select all ids ending with specific name and change its siblings input button

javascript

jquery

jquery-selectors