Fatal编程技术网
  • javascript/
  • Javascript 更改动态列表项的CSS

Javascript 更改动态列表项的CSS

javascript jquery css

Javascript 更改动态列表项的CSS,javascript,jquery,css,css-animations,Javascript,Jquery,Css,Css Animations,==更新=== 如果我从模板中删除style=“display:none；”，并按照下面的建议应用以下方法，则当您单击任何其他列表项时，空容器将触发。还可以做什么 我有一个ul列表，它是在运行时使用jQuery和JSON动态创建的（使用内联HTML作为模板）。当用户单击列表项（#navItem）时，我需要更改背景CSS样式。我已经尝试了从内联类到.appentTo（）所能想到的一切，等等。我下面的内容对于硬编码的元素很好，但对于动态加载的内容似乎没有任何效果。更令人困惑的是，li标记中的元素中的

==更新===

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

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

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

HTML:

当用户单击某个项目时需要发生的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");
});
这将监视动态元素：

$(".liFx").live("click", function() {
  $(this).addClass("liBG");
});
没有看到你的点击处理程序，我只能推测。然而，一般来说，当问题与动态内容有关，并且让他们对刺激做出反应时，问题在于你如何附加处理程序

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

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

现代的jQuery方法是使用
.on（）
（）：

然后，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;">

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

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

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

    现代的jQuery方法是使用
    .on（）
    （）：

    然后，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
});
    我不确定问题出在哪里，但您正在尝试这样做：

    $("#navlink").on('click', function() {
     $("#yourselector").css("backgroundColor", "#ddd"); //change the color
});
    我在函数中添加了另一个div和一个addClass（）方法。如果该类硬编码到标记中，则它不起作用

    <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>
    我在函数中添加了另一个div和一个addClass（）方法。如果该类硬编码到标记中，则它不起作用

    <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>
    从数据库通过php到json.ie:“'gotour:”：“javascript:navClickListener（'bodyContent'，dns+'\/wiki\/index.php\/airavity#u Directive#content'）；”的
    newItem.find（“a”）.attr（“href”，this.gotour）；
    放入
    newItem.find（“a”）.attr（“href”，this.gotour）通过php从数据库到json。ie:“‘GoTour’：“javascript:navClickListener（'bodyContent'，dns+'\/wiki\/index.php\/Airvability\/U Directive#content'）；”
    。live（）
    在最新版本的jQuery中被弃用，取而代之的是
    。on（）
    。
    被弃用，取而代之的是
    。on（）
    在jQuery的最新版本中。@Sam Tyson我知道应该这样做，但由于某些原因，它没有着火。我尝试了我能想到的所有组合。目前我添加了
    $（'#navContent'）。on（'click'，'.liFx'，function（）{$（this）.addClass（“liFx”）；
    到正文的底部。如果我向上移动一个父级'$（'#navScrollContainer'）。on（'click'、'#navContent'，function（）{$（this）.addClass（“liFx”）}）；，它按预期运行；点亮所有项目，而不是选中的项目。还有什么我可能有错的吗？@Sam Tyson我甚至尝试将
    newItem.find（“li”）.addClass（“liFx”）；
    等添加到我的loadNav中function@Andaero，您正在等待
    liF