jQuery if/else 查看/隐藏图层答案

【问题标题】：jQuery if/else view/hide layerjQuery if/else 查看/隐藏图层
【发布时间】：2013-03-22 10:09:44
【问题描述】：

我正在边缘动画中制作一个响应式网站滑动条，并且我为 1 张幻灯片制作了 2 张幻灯片（因此他们可以负责任地进行调整）。如果窗口宽度低于 786 像素，我希望第二张幻灯片显示，如果高于 786 像素，我希望显示第一张幻灯片。这是我使用的代码：

var n = $(window).width();
if (n > 768) {
    // Show an Element.
    //  (sym.$("name") resolves an Edge Animate element name to a DOM
    //  element that can be used with jQuery)
    sym.$("#panel_01_photo").show();
    // Hide an Element.
    //  (sym.$("name") resolves an Edge Animate element name to a DOM
    //  element that can be used with jQuery)
    sym.$("#panel_02_photo").hide();
}
else {
    // Show an Element.
    //  (sym.$("name") resolves an Edge Animate element name to a DOM
    //  element that can be used with jQuery)
    sym.$("#panel_02_photo").show();
    // Hide an Element.
    //  (sym.$("name") resolves an Edge Animate element name to a DOM
    //  element that can be used with jQuery)
    sym.$("#panel_01_photo").hide();
}

由于某种原因它不起作用。感谢任何提供帮助的人。

【问题讨论】：

你把它包在$(window).on('resize', function() { ... });中了吗？
不，我现在试过了，但我不确定我是否做得对（我是 js 和 jquery 的新手）：var n = $(window).width(); $(windows).on("resize", function(){ if ($(window).width() > 768) { sym.$("#panel_01_photo").show(); sym.$("#panel_02_photo").hide(); } else { sym.$("#panel_02_photo").show(); sym.$("#panel_01_photo").hide(); } });
您需要将var n = $(window).width() 放在resize 函数中以使其更新，否则n 将始终是第一个页面加载时的宽度。

标签： jquery if-statement width visibility adobe-edge

【解决方案1】：

$(window).on('resize', function() {
    var n = $(window).width();
    sym.$("#panel_01_photo").toggle(n > 768);
    sym.$("#panel_02_photo").toggle(n < 768);
});

【讨论】：

在此之前我需要隐藏#panel_02_photo 吗？
好吧，当然适合我 -> FIDDLE，您可以触发调整大小功能以根据窗口大小隐藏任何合适的内容
在 Adobe Edge Animate 中会不会有所不同？