2013-08-27 169 views
2

我有以下HTML結構。這裏就是我想要做的事:將元素類複製到另一個

  1. 點擊在.wrap DIV任何.edit類的任何.item,並顯示.list股利。
  2. .list div中選擇一個項目,在選定div內複製<i>的類別。
  3. 將複製的類添加到與.edit鏈接被單擊相同的類中的<i>

問題:

當我在.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),並用class .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/

回答

2

如果我正確理解您的問題,則可以使用全局變量來保存顯示列表的來源。

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/

1

嘗試

var $edits = $('.edit').click(function (e) { 
    $('.list').css({ 
     display: 'block' 
    }); 
    $edits.filter('.current').removeClass('current'); 
    $(this).addClass('current'); 
}); 

var $lislis = $('.list ul li').click(function() { 
    $lislis.removeClass(); 
    $(this).addClass('selected'); 

    var new_class = $(this).children('i').attr('class'); 
    $edits.filter('.current').closest('.item').find('i').removeClass().addClass(new_class) 
}); 

演示:Fiddle

1

想法是設置一個類用於向使用此類

$('.edit').click(function(e){ 
     $('.list').css({display: 'block'}); 
     $('.item').removeClass('selectedChange'); 
     $(this).parent().addClass('selectedChange'); 
     }); 
    $('.list ul li').click(function() { 
     $('.list ul li').removeAttr('class'); 
     $(this).addClass('selected'); 
     var new_class = $(this).children('i').attr('class'); 
     var toChangeItem = $('.item.selectedChange'); 
     toChangeItem.addClass(new_class); 
     alert(new_class); 
    }); 
被編輯所選擇的項目然後導航到元件
相關問題