Question

我正在尝试根据屏幕尺寸从跨度添加和删除图像。

我有1个事件处理程序来检查屏幕尺寸并在条件为true时触发其中一个功能。

这是我的事件处理程序：

    jQuery(window).resize(function() {
        var innerWidth = window.innerWidth;
        if (innerWidth < 1000) {
            ApplyIconsToMobileNav();
            console.log("apply icons hit");
        } else if (innerWidth > 1000) {
            RemoveIconsDesktopNav();
            console.log("removed icons hit");
        }
    });

这是我的应用图标功能：

        function ApplyIconsToMobileNav() {
            var Categories = jQuery(".nav-menu > .nav-mobile > .nav-item > a").find("span:first-of-type");
                jQuery(Categories).each(function() {
                    var Category = jQuery(this).text();
                    if(Category == "E-Liquid") {
                        jQuery(this).html("<img src='/media/wysiwyg/purple_icons/e-liquid(32x32).png' />" + Category);
                    } else if (Category == "E-Cigarette Kits") {
                        jQuery(this).html("<img src='/media/wysiwyg/purple_icons/e-cigarette(32x32).png' />" + Category);
                    } 
                });
        };

这是我的删除图标功能：

       function RemoveIconsDesktopNav() {
            var CategoriesImg = jQuery(".nav-menu > .nav-mobile > .nav-item > a").find("span:first-of-type");
                jQuery(CategoriesImg).each(function() {
                    jQuery("img", this).hide();
                });
        };

我在导航中有很多图像，但是只粘贴了相关代码。我的事件监听器工作正常，ApplyIconsToMobileNav()函数也可以，但是，我无法使RemoveIconsDesktopNav()正常工作。我知道，我可以做与ApplyIconsToMobileNav()中完全相同的操作，但是要向图像中添加display: none的样式，但是我想从选定的跨度中选择所有图像并隐藏/删除它们。

Answer 1

我不熟悉以下语法：jQuery("img", this).hide();

但是，您可以尝试以下操作：$(this).find('img').hide();

或者，如果希望在显示/隐藏之间切换，也可以使用.toggle();代替.hide();。

Answer 2

使用CSS Media Queries代替jQuery。例如-

此CSS仅在屏幕大于正常移动屏幕的767px时才有效

pd.to_datetime(s, format='%Y-%m-%d %H:%M:%S')

从屏幕上的跨度中删除图像jQuery的

2 个答案: