Question

我有以下代码 -

$(window).resize(function () {
    if ($(window).width() >= 1023) {
        for (var i = 0; i < seatInfo.length; i++) {
            if (seatInfo[i].data == 'true') {
                document.getElementById('Btn1').style.visibility = "visible";
                break;
            } else {
                document.getElementById('Btn1').style.visibility = "hidden";
            } 
        }
        if (nameInfo[0].data == "true") {
            document.getElementById('Btn2').style.visibility = "visible";
        }
    }
    if ($(window).width() <= 1022) {
        document.getElementById('Btn2').style.visibility = "hidden";
    }
});

这是写它的正确方法吗？我注意到它包含JavaScript和jQuery混合。

Answer 1

如果您特别询问jQuery语法，那么答案是否定的。您使用的是本机JavaScript方法，而不是更短的jQuery方法。

看一些jQuery selectors。例如：

可以使用jQuery的id attribute selector foo找到id属性为#的元素：

var element = $( "#foo" ); // match the element

更改元素可见性属性与更改任何其他css属性相同：

element.css( "visibility", "visible" ); // change css properties

jQuery的一个很棒的功能是它有很多快捷方法。有一些快捷方法可以显示和隐藏元素（并切换它们）：

Answer 2

为什么要停止使用jQuery中途？

document.getElementById('Btn1')使用$('#Btn1')。
.style.visibility = "visible"使用.show()（或者，如果您想要非常精确，.css('visibility', 'visible')）

有lots of good documentation on the official jQuery site。

Answer 3

您可以使用$('#some-id').hide()和$('#some-id').show()。而不是document.getElementById('some-id')与style.visibility = "visible"或style.visibility = "hidden"。

Answer 4

你可以使用jquery中的.css并将其设置为json结构来定义一个或多个CSS属性，这对我来说更容易记住。

$('#Btn1').css({
    'property': 'value', 
    'property': 'value'
});

或者只是将它用于单个属性

var btn1 = $('#Btn1'),
   btn2 = $('#Btn2'),
   window = $(window); 

window.resize(function () {
    if (window.width() >= 1023) {
        for (var i = 0; i < seatInfo.length; i++) {
            if (seatInfo[i].data == 'true') {
                btn1.css('visibility','visible');
                break;
            } else {
                btn1.css('visibility','hidden');
            } 
        }
        if (nameInfo[0].data == "true") {
            btn2.css('visibility','visible');
        }
    }
    if (window.width() <= 1022) {
        btn2.css('visibility','hidden');
    }
});

我使用正确的jQuery语法吗？

4 个答案: