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

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

请执行以下操作以查看我的意思。点击面包，然后点击高优先级改变面包的背景颜色进行阅读。现在点击芯片，然后点击中等优先级将背景颜色更改为黑色。现在你会看到面包现在变成了黑色。不好。

我敢肯定，代码是臃肿的，可能会使用一些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'});   
      });    
}); 
});

来源

2014-07-16 dchaboya

在你的小提琴，项目无法点击...你有不要放任何CSS造型 – j809

你是对的。我很困惑.click方法与.on（'click'）事件。 – dchaboya

我将其降低到：

$('#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

来源

2014-07-16 18:33:04 j08691

嗯，那很快。花了几个小时试图弄清楚这一点。更干净简洁。谢谢。 – dchaboya

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

回答

相关问题