Question

我遇到一个问题，我使用了JavaScript中的自定义滚动，它将从JS计算块的宽度和高度。问题是，当缩小视口时，如果窗口大小增加，则隐藏特定块，因此不会显示特定块，因此无法显示具有自定义滚动的块，因为它无法计算当前宽度和高度。如果我刷新页面，它工作正常。有没有什么我可以解决这个特定的块，而无需重新加载页面？ http://narkosi.com/test_copy此处是指向该网站新副本的链接。尝试将其调整为移动视图并返回桌面版本，您会注意到左右列隐藏但是如果刷新页面，它可以正常工作。提前谢谢。

Answer 1

尝试使用$( window ).resize();函数，它将在视口更改时运行

$( window ).resize(function() {
  your code
});

了解更多详情 https://api.jquery.com/resize/

用于普通javascript使用onresize="myFunction()" on body 有关详细信息，请检查 http://www.w3schools.com/jsref/event_onresize.asp

Answer 2

如果以上代码无效，请尝试

$([document, window]).on('ready resize', function (e) {
alert("hi");
});

Answer 3

答案极其存在于插件的docs

中

常规API信息（来自文档）

jcf.replaceAll( [context] ) - 替换整个页面上的元素。可选参数是要使用的上下文（可以是CSS选择器，也可以是DOM / jQuery对象）。在元素上添加类jcf-ignore以防止其自定义。

jcf.replace( elements [, moduleName] [, customOptions] ) - 替换某些元素或多个元素

jcf.destroyAll( [context] ) - 销毁所有自定义表单元素实例并恢复原始表单元素。可选参数是要使用的上下文（可以是CSS选择器，或DOM / jQuery对象）。

jcf.destroy( elements ) - 销毁某些元素或多个表单元素。应该应用于本机表单控件。

所以你可以destroy再次replace（我尝试在你的网站上进行此操作）。

$(window).resize(function() {
    /* I do this for all elements 
       but it's better for you to refresh only the elements you need to */
    setTimeout(function() {
       jcf.destroyAll();
       jcf.replaceAll();
    }, 0);
});

为什么需要setTimeout？好吧，没有它就行不通;）

您可以在此问题中找到一个很好的解释 - Why is setTimeout(fn, 0) sometimes useful?

简而言之：

解决方案是“暂停”JavaScript执行以让渲染线程赶上来。这就是setTimeout（）的超时为0的效果

刷新javascript而不重新加载页面

3 个答案: