jquery＆amp;当浏览器是一定宽度时，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();
        }
    }