更改动态列表项的 CSS

Change CSS of Dynamic List Item

本文关键字：CSS 列表 动态      更新时间：2023-09-26

===UPDATE===

如果我从模板中删除the style="display: none;并按照以下建议应用以下方法，则当您单击任何其他列表项时，空容器将触发。还能做什么？

我有一个在运行时使用 jQuery 和 JSON 动态创建的 ul 列表（使用内联 HTML 是一个模板）。我需要在用户单击列表项 （#navItem） 时更改背景 CSS 样式。 我已经尝试了我能想到的一切，从内联类到 .appentTo（） 等。我在下面拥有的内容适用于硬编码元素，但似乎没有什么适用于动态加载的内容。更令人困惑的是，li标签中元素中的类启动...???

任何帮助将不胜感激。以下是我的代码片段。闷闷不乐。

.HTML：

<div id="navScrollContainer" class="navContentPosition">
    <ul id="navContent">
    // Display as 'None' to prevent a empty containter from showing -->
        <li id="navItem" class="ulFx" style="display: none;">//<-THIS NEEDS TO CHANGE ONCLICK!!
            <a class="navA">
            <h1 class="navH1">.</h1>
            <h2 class="navH2">.</h2>
            <p class="navP">.</p>
            <hr class="navHR" />
        </li>
    </ul>
</div>
<script type="text/javascript">
    $('#navScrollContainer').on('click', '.ulFx', function() {
        $(this).addClass("liFx");
    });
</script>

这是将数据作为列表注入 DOM 的函数：

function loadNav(url, container, appendE) {
    $.getJSON(url, function(data) {
        $.each(data.items, function() {
            var newItem = $('#' + container).clone();
            // Now fill in the fields with the data
                    newItem.addClass('ulFx');
            newItem.find("h1").text(this.label);
            newItem.find("h2").text(this.title);
            newItem.find("p").text(this.description);
            newItem.find("a").attr("href", this.gotoURL);
            newItem.children().appendTo('#' + appendE);
        });
        $('#navHeaderTitle').text(data.listTitle);
        iniScroll('scrollNav', 'navScrollContainer');
        var target = data.targetKey;
        // transition("#" + pageName, "show");
    });
};

当用户单击项目时需要发生的 CSS（仅在该项目上）：

@-webkit-keyframes
liBG {from {
    background-color: transparent
}
50% { background-color: rgba(51,102,255,0.15); }
to {
    background-color: transparent
}
}
.liFx {
    -webkit-animation-name: liBG;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
}

赋予 li 项的类属性：

.navH1 {
    font-size: 18px;
    color: #FFA500;
    text-decoration: underline;
    font-weight: bold;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: 15px;
}
.navH2 {
    font-size: 16px;
    color: #999999;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 25px;
    font-weight: bold;
}
.navP {
    color: #888;
    font-size: 14px;
    text-align: justify;
    margin-top: 5px;
    margin-bottom: 16px;
    margin-left: 25px;
    margin-right: 10px;
}
.navA {
    text-decoration: none;
}
.navHR {
    border: none;
    background-color: #336;
    height: 1px;
}

这将监视动态元素：

$(".liFx").live("click", function() {
  $(this).addClass("liBG");
});

没有看到您的点击处理程序，我只能推测。 但是，通常，当问题与动态内容相关并让它们响应刺激时，问题在于如何附加处理程序。

如果使用 .click() 或 .trigger('click') ，处理程序将直接应用于要调用这些函数的元素。 这意味着，如果元素当前不存在，它们将不会收到处理程序。

解决此问题的方法是将事件侦听器附加到将始终存在的父元素，然后监视从动态子元素向上传播的事件。 您可以通过查看 event.target 来手动执行此操作，但是像往常一样，jQuery 使我们很容易做到这一点。

现代jQuery的方法是使用.on()（文档）：

$('#someparent').on('click', '#childselector', function() {
   // my handler code
});

然后jQuery在#someparent上附加一个处理程序，当它看到一个针对#childselector的点击时，它会触发。

如果要将类应用于 #navContent 的子级，并且#navContent将始终存在，请执行以下操作：

$('#navContent').on('click', 'li', function() {
     $(this).addClass("liFx");
});

如果#navContent也是动态的，只需在 DOM 树中排名更高即可。

作为旁注，我注意到li的 id 为 navItem . 这听起来很像一个类，而不是一个ID。 如果您要拥有多个navItem，它们不能都具有相同的ID。 这就是类的用途：

<li class="navItem liFx" style="display: none;">

我不确定问题出在哪里，但您正在尝试做这样的事情：

$("#navlink").on('click', function() {
     $("#yourselector").css("backgroundColor", "#ddd"); //change the color
});

我在我的函数中添加了另一个div 和一个 addClass（） 方法以及上面的 Jeff B 的答案。如果类被硬编码到标记中，则它不起作用。

<ul id="navContent">
    <li id="navItem" style="display: none;">
        <div>//ADDED THIS TAG TO EXCEPT THE CLASS
            <a>
                <h1>.</h1>
                <h2>.</h2>
                <p>.</p>
                <hr/>
            </a>
        </div>
    </li>
</ul>

在我的 js 文件中：

$.each(data.items, function() {
    var newItem = $('#' + container).clone();
    // Now fill in the fields with the data
    newItem.find("div").addClass("ulFx");//ADDED THIS METHOD
    newItem.find("h1").text(this.label);
    newItem.find("h2").text(this.title);
    newItem.find("p").text(this.description);
    newItem.find("a").attr("href", this.gotoURL);
    newItem.children().appendTo('#' + appendE);
});
相关文章：