Question

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

这就是为什么发布新状态有一个名为status_textarea的唯一ID，而评论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，但不是我的评论textarea（s），因为它们像我提到的那样在最后有一个id（例如：comment_textarea39）。所以我需要类似通配符选择的东西，只搜索： id以_textarea结尾，并忽略id后面的名称。

然后我还要选择下一个输入（最近的在之后＆＃34;这个＆＃34; textaera），其中包含btn-primary类，将其切换为btn-default

修改

HTML示例：

Status Post Textarea：

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

评论Textarea：

<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代替ends with selector，因为您在id属性的末尾有动态部分

textarea

另一个更好的选择是使用类选择器，即为所有需要选择的元素分配像$('.textarea')这样的公共类，然后使用

<div data-sly-test.directoryDefault="${properties.directoryDefault == true}" data-sly-unwrap>
    <div data-sly-include="directory.html" data-sly-unwrap />
</div>
<div data-sly-test="${!directoryDefault}" data-sly-unwrap>
    <div data-sly-include="gallery.html" data-sly-unwrap />
</div>

Answer 2

我建议你使用一个公共类绑定事件，即添加一个类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')
    };
});

Answer 3

对于那些更老式的人，只需在每个textarea中搜索包含＆＃39; textarea＆＃39;的ID，如果它与MAP中的模式匹配则返回它：

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

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

3 个答案: