javascript - Jquery加载后改变内容

Question

我想在加载后更改某个元素的样式。但是它给了我一个空指针。

function loadFriends() {
    $("#friendsContainer").load("friends.html");
}

selectCurrentSetting();

function selectCurrentSetting() {
    console.info("test");
    var selection = document.getElementById("friendsContainer").getAttribute("selection");
    console.info(selection);
    if (selection != null) {
        document.getElementById(selection).classList.add("selected");
    }
}

这是它在 friends.html 中加载的内容

<div id="friends" class="container friends_container">
    <div class="container_content" id="container_content">
        <div class="option" id="#profile" onclick="">Profile <span class="fas fa-cog icon"></span></div>
        <div class="option" id="#settings" onclick="">Settings <span class="fas fa-cog icon"></span></div>
        </div>
    </div>
</div>

这就是它应该取代的东西

<div id="friendsContainer" selection="settings"></div>

代码 selectCurrentSetting() 加载后应该改变 friends.html 中 #settings 的样式。但是它给我一个空指针。

在所需元素可用后，如何让它执行 selectCurrentSetting() 中的代码？

Answer 1

删除#在

id="#settings"

或设置

selection="#settings"

因为您不需要在标记中设置 id

Working demo