jQuery的添加，刪除類jQuery的

Question

對不起，我的英語（

當你點擊「.jv加」添加」這是不可能的一對夫婦的功能。

1. .cat-懸停「，並刪除」.item「+添加html按鈕，它將按下它將所有返回的東西都恢復到原樣
2. 我認爲這個函數返回到它以前的狀態，也就是當點擊」 .cat-close「（添加了html），需要刪除」.car-hover「和html（）以及添加」.item「 切換嘗試，但失敗（
3. 我有類約13個元素「JV-添加」那怎麼辦，將在完成後，目前的功能此條，其他所有復位至零

我會的幫助非常感謝！

HTML代碼：

<div class="cat-item"> 
      <div id="cat" class="jv-add item"> 
       <h3 class="cat-one head">Name category</h3> 
       <div class="clear"></div> 
       <ul class="onelevel"> 
        <li><a href="file.html">Sub category 1</a></li> 
        <li><a href="file.html">Sub category 2</a></li> 
        <li><a href="file.html">Sub category 3</a></li> 
        <li><a href="file.html">Sub category 4</a></li> 
        <li><a href="file.html">Sub category 5</a></li> 
       </ul> 
      </div> 
     </div> 

Javascript代碼：

$(".cat-item>.jv-add").click(function() { 
    $(this).addClass("cat-hover").removeClass("item").append('<i class="fa cat-close fa-times"></i>'); 
}); 

Answer 1

你可以委託所有的事件的處理的容器元素cat-item

$(".cat-item") 
    .on('click', '.jv-add:not(.cat-hover)', function() { 
    $(this) 
     .addClass("cat-hover") 
     .removeClass("item") 
     .append('<i class="fa cat-close fa-times"></i>'); 
}).on('click', '.cat-close', function (e) { 
    $(this) 
     .closest('.jv-add') 
     .removeClass('cat-hover') 
     .addClass('item') 
     .find('.cat-close') 
     .remove(); 
    return false; 
}); 

演示在http://jsfiddle.net/rUKde/