将jQuery脚本转换为纯JavaScript

Question

这是我的脚本：

我想将其转换为纯JavaScript，因此不必使用jQuery。

if ( $('#movie.playing').length ) {

    $('.settings').click();

    $('<style> .element { display: none; } </style>').appendTo(document.head);

    $('.item').click(function() {
        if ($(this).text().trim() === "Ann") {
            if ($(this).attr('aria-checked') == 'true') {
                $('.element').css('display', 'block');
            } else {
                $('.element').css('display', 'none');
            }
        }
    });

}

这是我到目前为止的内容：

var movie = document.querySelector("#movie_player.playing-mode");
if ( movie ) {

    document.querySelector(".settings").click();

    var style = document.createElement("text/css");
    style.styleSheet.cssText = ".element { display: none; }";
    document.head.appendChild(style);

    document.querySelector(".item").click(function() {
        /* what do I do with this part? */
        if ($(this).text().trim() === "Ann") {
            if ($(this).attr('aria-checked') == 'true') {
                $('.element').css('display', 'block');
            } else {
                $('.element').css('display', 'none');
            }
        }

    });

}

我不知道如何转换if语句，在单击带有文本“ Ann”的按钮时，它将把display: block元素从display: block切换为none ，反之亦然。

Answer 1

1. $（选择器）= document.querySelector（选择器）
2. $（selector）.click（）= document.querySelector（selector）（也许先缓存元素）.addEventlistener（eventType，fn）
3. 可以将css内容添加为“类”，例如el.classList.add（someClassName）。

更新

最好使用JavaScript获得基本知识| MDN 。 个人化比jQuery容易。