jquery - 将一个元素类复制到另一个元素类

Question

我有以下 HTML 结构。这就是我正在尝试做的事情:

1. 点击任意 .edit任何类(class) .item在 .wrap div，并显示.list分区。
2. 在.list中选择一个项目div，复制 <i> 的类在选定的 div 内。
3. 将复制的类添加到 <i>它与 .edit 属于同一类。链接已被点击。

问题:

当我单击 .list 中的项目时div，我可以找到所选项目类，但我无法弄清楚如何找到单击编辑链接的类。

这是 HTML:

<div class="wrap">
    <div class="item">
         <div class="icon1"><i class="default"></i>Default</div>
         <div class="edit">Change</div>
    </div>

    <div class="item">
         <div class="icon2"><i class="default"></i>Default</div>
         <div class="edit">Change</div>
    </div>
</div>

<div class="list">
    <ul>
        <li> <i class="class1"></i>New 1</li>
        <li> <i class="class2"></i>New 2</li>        
    </ul>
</div>

因此，在上面的示例中，当我单击“更改”时，我想从 .list 中选择一个项目，然后复制该项目中的类(例如 class1)并将其替换为 .default 类。

这是 jQuery:

$('.edit').click(function(e){ 
      $('.list').css({display: 'block'});       
});

$('.list ul li').click(function() {
    $('.list ul li').removeAttr('class');
    $(this).addClass('selected');

    var new_class = $(this).children('i').attr('class');
    //alert(new_class);
});

演示: http://jsfiddle.net/hfgsJ/

Answer 1

如果我正确理解你的问题，你可以使用全局变量来保存显示列表的源。

var source_element;

$('.edit').click(function(e){ 
    $('.list').css({display: 'block'});       
    source_element = $(this);
});

$('.list ul li').click(function() {
    $('.list ul li').removeAttr('class');
    $(this).addClass('selected');   
    new_class = $(this).children('i').attr('class');
    source_element.removeClass().addClass(new_class);
});

http://jsfiddle.net/hfgsJ/5/