Question

努力使jquery和li在这种情况下工作：

//: A UIKit based Playground for presenting user interface

import UIKit
import PlaygroundSupport

let view = UIView(frame: CGRect(x: 0, y: 0, width: 916, height: 611))
view.backgroundColor = .white
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 916, height: 611))
view.addSubview(imageView)


if let sample = Bundle.main.path(forResource: "sample", ofType: "jpg") {
    let image = UIImage(contentsOfFile: sample)
    imageView.image = image
}

PlaygroundPage.current.liveView = view
PlaygroundPage.current.liveView

取值

<div id="statLateralMenu">
    <h3>Statistics</h3>

    <ul>
        <li id="id1" class="selected">Stat 1</li>
        <li id="id2">Stat 2</li>
    </ul>
</div>

我很确定错误是非常愚蠢的，因为我已经在我的页面的另一个区域实现了这个代码并且它完美地工作，但这次我真的无法使它工作。有什么线索吗？

修改

我甚至无法发出警报，我的问题还没有（还）更改班级的$(function() { $("#statLateralMenu li").click(function() { alert( "A" ); $("#statLateralMenu li").removeClass("selected"); $(this).addClass("selected"); }); } );。 JQuery加载在同一页面我有另一个ul / li复合体，它完美地运行

编辑2： 在这一点上，我可能会搞砸了一些，但是在这里使用我的代码它也不起作用：https://jsfiddle.net/nakjyyaj/4/

Answer 1

似乎有效：

$(function() {
  $("li").click(function() {
    $("li").removeClass("selected");
    $(this).addClass("selected");
  });
});

.selected{background:yellow}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>azerty</li>
  <li>bzerty</li>
  <li>czerty</li>
</ul>

要处理动态内容，您可以使用事件委派：

$(function() {
  $("ul").on("click", "li", function() {
    $("li").removeClass("selected");
    $(this).addClass("selected");
  });
});
setTimeout(function () {
  $("p").remove();
  $("ul").html(""
  + "<li>azerty</li>"
  + "<li>bzerty</li>"
  + "<li>czerty</li>"
  );
}, 1000);

.selected{background:yellow}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Wait 1 second.</p>
<ul></ul>

进一步阅读：https://stackoverflow.com/a/46251110/1636522。

Answer 2

尝试改变 $("#statLateralMenu li").removeClass("selected");到

$(this).removeClass("selected");

像那样

$(function() {
    $("#statLateralMenu li").click(function()
    {
        alert( "A" );
        $(this).removeClass("selected");
        $(this).addClass("selected");
    });
}
);

但如果您只想更改设计元素，可以使用：hover

li:hover { 
    background-color: yellow;
}

Answer 3

在你的JSFiddle中，你忘了加载JQuery框架。你不需要JSFiddle中的脚本标签（不需要和）。

JQuery和onclick在这种情况下不起作用

3 个答案: