Question

我正在尝试使用data-maxlength分配给它们的所有元素以及属性中的任何值。然后，每次文本输入或textarea的值发生变化时，我想在工具提示中显示输入的length以及Bootstrap工具提示中的maxlength值（x / 250个字符）。

当我输入输入时，没有任何反应，没有工具提示，没有错误。甚至我的console.log消息都没有出现在控制台中。这段代码有什么问题？

jQuery / JS：

$(document).ready(function(){
    $('[data-maxlength]').find().each(function(){
        console.log('hello');
        $(this).on('keyup', function(){
            console.log('hi!');
            $(this).data('toggle', 'tooltip').data('placement', 'bottom').attr('title', $(this).val().length + ' / ' + $(this).data('maxlength'));
        });
    });
});

HTML：

<textarea class="form-control" rows="7" name="description" data-maxlength="250"></textarea>

Answer 1

您不需要使用.find()

$('[data-maxlength]').each(function(){

但是看起来你错了，你应该在选择器本身绑定事件，同时返回一个集合，$(this)将是你当前的元素：

$('[data-maxlength]').on('keyup', function(){
    $(this).data({
       'toggle':'tooltip', 
       'placement' : 'bottom'
    }).attr('title', $(this).val().length + ' / ' + $(this).data('maxlength'));
});

Answer 2

你不能使用jQuery方法 .find() 没有选择器你应该向它添加选择器.find(selector)或删除它：

$('[data-maxlength]').find(selector).each(function(){
//OR
$('[data-maxlength]').each(function(){

注意：您不应在each()方法中定义事件，最好在跟踪输入更改时使用input事件而不是keyup：< / p>

$(document).ready(function(){
    $('[data-maxlength]').on('input', function(){
        $(this).data({ toggle: "tooltip", placement: "bottom"})
               .attr('title', $(this).val().length + ' / ' + $(this).data('maxlength'));
    });
});

希望这有帮助。

Answer 3

您正在尝试选择具有data-maxlength值的元素。您可以使用以下内容。您可以在此使用filter()代替find()。

尝试使用属性
中的任何值来获取分配了data-maxlength的所有元素

$('[data-maxlength]').filter(function(){
    $(this).data('maxlength') != '';
}).each(function(){});

Answer 4

您可以通过以下代码找到它

$(document).ready(function(){
  alert($(".devTxt").attr("data-maxlength"));
});

https://jsfiddle.net/4eekb7jz/

为什么属性选择器不能使用jQuery？

4 个答案: