javascript - jquery和wordpress在浏览器一定宽度时隐藏元素

Question

我正在尝试执行一个函数来执行此操作

1. 检测屏幕尺寸
2. 获取某个DIV“.project-images”的宽度(有时该div为400px，有时为1800px、600px等)
3. 如果 DIV 小于浏览器，则隐藏另一个 div“.controls”

我也希望这一切都能响应式地完成。我查看了该网站上的其他脚本并设法得到了这个，但它根本不起作用。

jQuery(document).ready(function($) {

    var $window = $(window);
    var $projectWidth = $('.project-images').width();

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize > projectWidth) {
            $('.controls').hide();
        }
    }

    checkWidth();   
    $(window).resize(checkWidth);
});

HTML

<div id="wrapper">

<div class="frame" id="centered" style="overflow: hidden;">
<ul class="clearfix project-images">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>

<div class="controls center">
<button class="btn prev"></button>
<button class="btn next"></button>
</div>

</div>

Answer 1

这是一个错字。在 if 中，您引用了错误的名称变量。

您已声明 $projectWidth 并且正在比较 projectWidth

试试这个。

var $window = $(window);
    var $projectWidth = $('.project-images').width();

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize > $projectWidth) {// Here you had the typo
            $('.controls').hide();
        }
    }