如果 .parent() .hasclass 则不应用该函数答案

【问题标题】：if .parent() .hasclass then do not apply the function如果 .parent() .hasclass 则不应用该函数
【发布时间】：2012-01-25 11:43:40
【问题描述】：

我有这个函数，只有当父级没有 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');
        });
   };

【问题讨论】：

您的标题中基本上有解决方案...有什么问题？您在哪个上下文中调用该函数？响应某些事件？请澄清您的问题。
我的问题是当输入展开时，因为如果您在该输入上单击多次，宽度保持为 width:350 并且在模糊时不知道返回。如果我只在 hasClass('cooling') 不够时才应用它:(
请创建一个jsfiddle.net 演示以帮助我们帮助您。
尝试在第一个和第二个输入上快速单击多次，您会看到输入在 .animation 宽度处保持阻塞。在这里你有一个小提琴：jsfiddle.net/DCjYA/221谢谢！
在输入中多次单击似乎在 Chrome 中不是问题。你用的是哪个浏览器？

标签： jquery css dom

【解决方案1】：

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

【讨论】：

我的问题是当输入展开时，因为如果您在该输入上单击多次，则宽度保持为 width:350 并且模糊不知道要返回。如果我只在 hasClass('cooling') 不够时才应用它:(

【解决方案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 给你。

我希望我对你有所帮助，尽管如此，请记住，这里的其他几个人已经正确回答了你最初的问题。如果父级具有特定的类，它们都提供了不执行某些东西的正确代码。将来，在提问时，请注意准确地表达您遇到的问题。您问的是“我如何根据焦点切换大小”而不是“如果父级有类则不适用......”。其他答案确实回答了您的问题。问题是你没有问正确的问题。

【讨论】：

我需要那个类，因为它必须添加到作为 div 的输入父级，以便在输入扩展时为他设置一个边距，因为如果不是，输入将覆盖我的应用程序的其他输入.但是，非常感谢您的回答和耐心。这真的帮助了我:)
这很容易添加回来，这个答案的症结与那个类无关。

【解决方案3】：

试试这个：

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

【讨论】：

我的问题是当输入展开时，因为如果您在该输入上单击多次，则宽度保持为 width:350 并且模糊不知道要返回。如果我只在 hasClass('cooling') 不够时才应用它:(

【解决方案4】：

您只想设置一次data-default，所以我会采用这个解决方案：

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

【讨论】：

【解决方案5】：

作为先前答案的替代方案：有时将链接用于一些简单的任务可能会更干净，例如：

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

【讨论】：