使用 jquery 或 javascript 在 html 列表中选择列表项的最简单方法是什么？答案

【问题标题】：What is the easiest way to select a list-item in a html list with jquery or javascript?使用 jquery 或 javascript 在 html 列表中选择列表项的最简单方法是什么？
【发布时间】：2015-06-16 19:23:37
【问题描述】：

我正忙于编写基于 javascript/jquery 的游戏 Battleship 版本。在我的概览屏幕中，我有一个游戏列表。我想做的是，每次当我选择（单击）一个列表项时，列表项的背景颜色都会发生变化，并且所选项目保存在一个变量中，当我选择另一个列表项时该项目将被选中，并且前一个所选项目的背景颜色将恢复正常。只有一个问题，我找不到一种有效的方法来更改背景颜色并将列表项保存到 var。目前我正在尝试这样做，但感觉不对。

this.setListenerForElementsInGameList = function() {
    $('#game-list li').each(function(){
        this.click(this.event_selectGameFromList);
    });
}

this.event_selectGameFromList = function() {
    $('#game-list li').each(function(){
        this.css("background-color", "#39B7CD");
    });
    this.css("background-color", "#FFFFFF")
}

遗憾的是，它还没有工作，但我想知道我的代码目前看起来是否朝着正确的方向前进，或者是否有更简单、更清洁和更有效的方法。

我们将不胜感激。

PS。这是我的游戏概览的当前布局：“http://i.imgur.com/ujF6Ys9.png”

【问题讨论】：

标签： javascript jquery html list listeners

【解决方案1】：

您不需要.each() 来绑定事件并使用.css()。 jQuery 为您完成了它。另外由于.css() 是一个jQuery 方法，您需要将this 转换为jQuery 对象。

this.setListenerForElementsInGameList = function() {
    $('#game-list li').click(this.event_selectGameFromList);
}

this.event_selectGameFromList = function() {
    $('#game-list li').css("background-color", "#39B7CD");

    //Here this refers to element which initiated the event
    $(this).css("background-color", "#FFFFFF")
}

注意：函数中的this 指的是您正在迭代的元素。

【讨论】：

【解决方案2】：

使用带有闭包的立即函数来存储引用：

(function() {
  var prevLi = null;
  $('li').on('click', function() {
    var that = $(this);
    that.css("background-color", "#39B7CD");
    if (prevLi) {
      prevLi.css("background-color", "#FFF");
    };
    prevLi = that;
  });
}());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

将 'li' 选择器更改为您帖子中需要的 $('#game-list li')。

【讨论】：

【解决方案3】：

这是解决问题的更好方法，因为使用 css 类比直接在 javascript 中修改 css 更好。此外，除了更改所选项目的背景之外，您还可以进行更多样式设置。

我还修改了一些 javascript，消除了不必要的 foreach 循环。

this.setListenerForElementsInGameList = function() {
    $('#game-list li').on('click', this.event_selectGameFromList);
}

this.event_selectGameFromList = function(e) {
    var selected = $('selected');
    $('#game-list .selected').removeClass('selected');
    $(this).addClass('selected');
}

使用以下css：

.game-list li {
    list-style: none;
    background-color: #39B7CD;
}

.game-list .selected {
    background-color: #FFFFFF;
}

这里是 jsfiddle：https://jsfiddle.net/pv1076f1/1/

【讨论】：