I'm trying to get an if/else statement to work in jQuery. Based on what users choose on our platform .card-decorator-brand-curve gets added with either card-decorator-stroke or card-decorator-stroke-none.

card-decorator-stroke works how I want it but card-decorator-stroke-none doesn't.

JS Below:

$('.card-decorator-brand-curve').each(function() {
    if ($(this).find('card-decorator-stroke')) {
        $(this).removeClass('card-decorator-stroke');
        $(this).addClass('brand-curve-stroke');
        console.log("test me");
   } else {
    $(".card-decorator-stroke-none").removeClass('brand-curve-stroke');
        console.log("test me 2");
    }
 });

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Any help to assist me to make this fix is gladly appreciated.

Thank you

CodePudding user response：

$(this).find('card-decorator-stroke') returns a jQuery object which is always truthy.

if($(this).find('card-decorator-stroke').length)

CodePudding user response：

My brain might be fried from coding all day but I finally figured it out.

 $('.card-decorator-brand-curve').each(function() {
         if ($('.card-decorator-brand-curve').hasClass('card-decorator-stroke')){
             $('.card-decorator-brand-curve').addClass('brand-curve-stroke');
             $('.card-decorator-brand-curve').removeClass('card-decorator-stroke');
             console.log('test');
         } else {
             $('.card-decorator-stroke-none').removeClass('brand-curve-stroke');
             console.log('test me');
           }
});

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>