Question

我正在尝试对列表元素执行一些样式更改。这就是我要做的...我有两个列表，一个是购物项目，另一个是帮助管理购物项目的列表（通过更改购物清单项目的背景颜色来设置优先级）。我想要做的是首先点击购物项目，然后点击其中一个管理项目来设置一些样式。我有一些东西正在运行，但它需要一些工作。一个问题是，如果我使用不同的优先级管理（样式）列表中的第二个项目，它将应用所有项目之前已设置样式的样式。

执行以下操作以查看我的意思。单击面包，然后单击高优先级以更改要读取的面包的背景颜色。现在单击Chips，然后单击medium priority将背景颜色更改为黑色。你现在可以看到面包现在变成了黑色。不好。

我确信代码是膨胀的，并且可能使用一些if / else逻辑而不是为每个样式事件使用嵌套和完全独立的函数。对不起，由另一个新手发布。

这是一个fiddle

<div class="the-lst">
<h4>YOUR LIST - Click one of these items first</h4>
<ul id="sortable2" class="connectedSortable">
    <li>Bread</li>
    <li>Chips</li>  
    <li>Cookies</li>
</ul>
  </div>
  <div class="lst-manage">
       <h4>MANAGE LIST - Then click one of these items to set priority</h4>
   <ul>
      <li id="hp">High Priority</li>
      <li id="mp">Medium Priority</li>
      <li id="lp">Low Priority</li>
      <li id="done">Done</li>
      <li id="remove">Remove</li>   
  </ul>
 </div>


$(document).ready(function() {
$(".the-lst").on("click", "li", function(event) {
            var lst = $(this).closest('li');
            $('.lst-manage').on("click", "#hp",function(event) {
                lst.css({'background-color': 'red'});          
            });         
});
    $(".the-lst").on("click", "li", function(event) {
            var lst = $(this).closest('li');
            $('.lst-manage').on("click", "#mp",function(event) {
                lst.css({'background-color': 'black'});           
             });            
 });
$(".the-lst").on("click", "li", function(event) {
            var lst = $(this).closest('li');
            $('.lst-manage').on("click", "#lp",function(event) {
                lst.css({'background-color': 'green'});           
             });            
 });
});

Answer 1

我会把它减少到：

$('#sortable2 li').click(function () {
    $('#sortable2 li').removeClass('selected');
    $(this).addClass('selected');
})
$('.lst-manage li').click(function () {
    if (this.id == "hp") $("#sortable2 li.selected").css('background', 'red')
    if (this.id == "mp") $("#sortable2 li.selected").css('background', 'black')
    if (this.id == "lp") $("#sortable2 li.selected").css('background', 'green')
})

<强> jsFiddle example

嵌套单击事件以更改元素样式

1 个答案: