toggleClass conditionals not working / icon dissappears after two clicks on mobile

Question

I'm trying to animate buttons with jquery. On the desktop they are fine, but on mobile the buttons dissappear after two clicks.

I can't figure out how to tell it that if the class is only "fa" then automatically add "fa-plus" to the class. Can someone point me in the right direction?

Js:

    // plus button hover effect

$("td i").hover(
    function() {
        $(this).removeClass('fa-plus');
        $(this).addClass('fa-plus-circle');
    },

    function() {
        $(this).removeClass('fa-plus-circle');
        $(this).addClass('fa-plus');

        if ($(this).hasClass("fa-times-circle")) {
            $(this).removeClass('fa-plus');
        }

       if ($(window).height() <= 1024) return;

    });

// plus button click effect

$("td i").click(function() {
    $(this).removeClass('fa-plus');
    $(this).removeClass('fa-plus-circle');
    $(this).toggleClass("fa-times-circle fa-plus");



});

HTML EXAMPLE

<div class="maindish">




<div id="VeganNoBaseSauce"></div>



                <!-- BASES -->
                <div><img class="headingimage" src="http://www.padthai.decorolux.com/wp-content/uploads/2018/03/ikonok-06.png"></div>
                <table>
                    <tr>
                        <th width="15%">Bases</th>
                        <th width="20%"></th>
                        <th width="15%" style="font-weight:normal">Calories</th>
                        <th width="15%" style="font-weight:normal">Carbs</th>
                        <th width="15%" style="font-weight:normal">Fat</th>
                        <th width="15%" style="font-weight:normal">Protein</th>
                        <th width="5%" style="font-weight:normal">Add</th>
                    </tr>
                    <tr vegetarian vegan lactosefree glutenfree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra.png'></td>
                        <td>Rice Noodle</td>
                        <td>517.2</td>
                        <td>76.1</td>
                        <td>14.4</td>
                        <td>20.8</td>
                        <td class="ingredients" data-calories="517.2" data-carbs="76.1" data-fat="14.4" data-proteins="20.8"><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" vegetarian lactosefree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra2.png'></td>
                        <td>Egg Noodle</td>
                        <td>510.5</td>
                        <td>66.1</td>
                        <td>14.1</td>
                        <td>29.8</td>
                        <td class="ingredients" data-calories="510.5" data-carbs="66.1" data-fat="14.1" data-proteins="29.8"><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" vegetarian vegan lactosefree glutenfree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra3.png'></td>
                        <td>Vermicelli</td>
                        <td>506.9</td>
                        <td>76.9</td>
                        <td>14.1</td>
                        <td>18.1</td>
                        <td class="ingredients" data-calories="506.9" data-carbs="76.9" data-fat="14.1" data-proteins="18.1" ><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" vegetarian vegan lactosefree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra4.png'></td>
                        <td>Whole Grain Noodle</td>
                        <td>476.6</td>
                        <td>53.8</td>
                        <td>16.6</td>
                        <td>28.0</td>
                        <td class="ingredients" data-calories="476.6" data-carbs="53.8" data-fat="16.6" data-proteins="28" ><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" vegetarian vegan  glutenfree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra5.png'></td>
                        <td>White Rice</td>
                        <td>514.8</td>
                        <td>72.4</td>
                        <td>14.8</td>
                        <td>23.0</td>
                        <td class="ingredients" data-calories="514.8" data-carbs="72.4" data-fat="14.8" data-proteins="23" ><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" vegetarian vegan lactosefree glutenfree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra6.png'></td>
                        <td>Brown Rice</td>
                        <td>516.0</td>
                        <td>70.1</td>
                        <td>16.0</td>
                        <td>22.9</td>
                        <td class="ingredients" data-calories="516" data-carbs="70.1" data-fat="16" data-proteins="22.9" ><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" vegetarian vegan lactosefree glutenfree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra7.png'></td>
                        <td>Vegetable Base</td>
                        <td>106.6</td>
                        <td>14.2</td>
                        <td>1.8</td>
                        <td>8.4</td>
                        <td class="ingredients" data-calories="106.6" data-carbs="14.2" data-fat="1.8" data-proteins="8.4" ><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                </table>

Here's the pen:

https://codepen.io/Pbalazs89/full/yKxdeR

Answer 1

The reason this is working with desktop rather than mobile is because your hover action is putting the fa-plus-circle back, but that hover event is never triggered on mobile.

So, in the click event, you should check to see which class is in the element, and remove/add accordingly. Something like:

$("td i").click(function() {
    let el = $(this);
    if(el.hasClass("fa-times-circle") {
         el.removeClass("fa-times-circle").addClass("fa-plus");
    } else {
         el.removeClass("fa-plus").addClass("fa-times-circle");
    }
});

Answer 2

The problem is you have hover and click, on mobile when you clicked on an element the hover is also applied.

After you click on x, the button seems to disappear but if you just tap somewhere else so that the focus is not on the button anymore, you will see the button comes back.

This is because of the hover effect. It looks to me you can code hover in css, I don't see any reason why you need to do this in js.

If you have code to detect which device the user is using, then you could execute the hover code only if you are on desktop.

It looks like the hover is inverting the bg and text colour so it shouldn't be an issue moving this code to css. If your page is responsive, you could put the hover code in a media query range to target say width > 768px for example so on mobile the hover won't be here. You can't really hover on mobile since you are tapping

Answer 3

set a default class then use jQuery toggleClass instead.