если .parent () .hasclass, тогда не применять функцию

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

В качестве альтернативы предыдущим ответам: иногда было бы лучше использовать цепочку для некоторых простых задач, таких как:

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

Answer 5

Вы хотите установить data-default только один раз, поэтому я бы пошел с этим решением:

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