toggleClass 条件不起作用/在移动设备上单击两次后图标消失

Question

我正在尝试使用 jquery 制作按钮动画。在桌面上它们很好，但在移动设备上单击两次后按钮就会消失。

我不知道如何告诉它如果 class 只是 "fa" 然后自动将 "fa-plus" 添加到 class。有人能指出我正确的方向吗？

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 示例

<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>

这是笔：

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

Answer 1

设置默认 class 然后使用 jQuery toggleClass。

Answer 2

问题是你有悬停和点击，在移动设备上当你点击一个元素时悬停也会应用。

点击 x 后，按钮似乎消失了，但如果您只是点击其他地方，焦点不再位于按钮上，您会看到按钮又回来了。

这是因为悬停效果。在我看来，您可以在 css 中编写悬停代码，我看不出有任何理由需要在 js 中执行此操作。

如果您有检测用户使用的设备的代码，那么只有在桌面上时才可以执行悬停代码。

悬停似乎颠倒了背景色和文本颜色，因此将此代码移动到 css 应该不是问题。如果您的页面是响应式的，您可以将悬停代码放在媒体查询范围内以定位宽度> 768px，例如在移动设备上悬停不会出现在这里。你不能真正悬停在手机上，因为你正在点击

Answer 3

之所以适用于桌面而非移动设备，是因为您的悬停操作会将 fa-plus-circle 放回去，但该悬停事件永远不会在移动设备上触发。

因此，在单击事件中，您应该检查哪个 class 在元素中，并相应地 remove/add。类似于：

$("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");
    }
});

toggleClass 条件不起作用/在移动设备上单击两次后图标消失

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

javascript

jquery

conditional