Question

我有以下HTML结构。这就是我想要做的事情：

点击.edit div中任意.item的所有.wrap课程，然后展示.list div。
在.list div中选择一个项目，复制所选div中<i>的类。
将复制的类添加到<i>，该.edit位于点击.list链接的同一个类中。

问题：

当我点击<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> div中的项目时，我可以找到所选的项目类，但我无法确定如何找到点击编辑链接的课程。

这是HTML：

$('.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);
});

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

这是jQuery：

{{1}}

演示： 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/

Answer 2

尝试

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

Answer 3

我们的想法是为要编辑的所选项目设置一个类，然后使用此类

导航到该元素

$('.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);
    });

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

3 个答案: