Question

我有这个函数，只有当父级没有类cooling时才应该调用它。

function inputWidth() {
        $('input[disabled="disabled"]').removeAttr("disabled").prop("readonly", true);
        $('input[type!="submit"]').focus(function(){
            if ($(this).val().length > 20) {
                $(this).attr('data-default', $(this).width());
                $(this).animate({
                    width: 350
                }, 'slow');
                $(this).parent().addClass('cooling');
            }
        }).blur(function(){ /* lookup the original width */
            var w = $(this).attr('data-default');
            $(this).animate({
                width: w
            }, 'fast');
            $(this).parent().removeClass('cooling');
        });
   };

Answer 1

if (!$(this).parent().hasClass('cooling'))
{
    //your function
}

Answer 2

我认为这是过度分析的。没有理由为父级添加额外的类（除非你为了样式而这样做，在这种情况下可以随意添加它）。

基本上我们只设置一次默认数据值，如果它在那里我们不再设置它（我们只是重复使用它）。

您还会注意到使用$ .data（）而不是.attr（）。尽量避免使用.attr（）。对于这类事情并不是那么有效，因为你基本上要求它在实际的DOM中查找或存储值（操纵DOM非常昂贵）。在大多数情况下，它不是正确的用法。在你的代码中，$（this）.data（“default”）是获得你想要的东西的正确方法。举个例子：

<input type="text" id="username" data-item="random data" />

使用jQuery获取您调用的数据项：

$("#username").data("item");

然后返回"random data"。

最后一件事，当使用动画（特别是'慢'动画）时，你应该养成先调用stop的习惯，这样就可以在开始下一个动画之前立即停止正在进行的动画。

$('input[disabled="disabled"]').removeAttr("disabled").prop("readonly", true);
$('input').focus(function() {
    if ($(this).val().length > 20) {
        $(this).data('default', $(this).data('default') || $(this).width());
        $(this).stop().animate({
            width: 300
        }, 'slow');
    }
}).blur(function() { /* lookup the original width */
    $(this).stop().animate({
        width: $(this).data('default')
    }, 'fast');
});

这也是你的jsfiddle。

我希望我帮助了你，所有这一切，请记住，你原来的问题在这里被其他几个人正确回答了。如果父级具有特定类，它们都提供了正确的代码，用于不执行某些操作。在将来，在提问时，请务必清楚地说明您所遇到的问题。你问的问题是“我怎样才能根据焦点切换大小”，而不是“如果父类具有类，则不适用......”。其他答案确实回答了你的问题。问题是你没有问正确的问题。

Answer 3

试试这个：

if( !$(this).parent().hasClass('cooling') ){
    inputWidth();
}

Answer 4

你只想设置data-default一次，所以我会选择这个解决方案：

...
if (typeof $(this).attr('data-default') == 'undefined') {
  $(this).attr('data-default', $(this).width());
}
...

Answer 5

作为以前答案的替代方案：有时，对于一些简单的任务使用链接可能会更加干净：

uwv.parent('[data-update-with-value]')
    .css({display: 'block'});

如果.parent（）。hasclass则不应用该函数

5 个答案: