如果.parent()为.hasclass，则不应用该函数

Question

我有这个函数，只有当parent没有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

我认为这是被过度分析了。没有理由向父类添加额外的类(除非您这样做是为了样式化，在这种情况下，您可以自由地将其添加回来)。

基本上，我们只设置一次默认数据值，如果它在那里，我们就不会再次设置它(我们只是重用它)。

您还会注意到使用$.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 2

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

Answer 3

试试这个：

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