Question

问题：1

我有两个ul li元素，这些元素将从一个到另一个获取和写入值。比如使用jquery li a函数将值从li b写入另一个html 。一切正常，尽管我只需要写前5个字符。

问题：2

我有一个进度条，该栏将填满每一步。在初始阶段，仪表既不会前进也不会后退，甚至导航也都会起作用。在填充每个步骤时，进度表将展开，导航将添加一个类active。因此，一旦Iam在第2步或更进一步，所有我需要启用导航仅我已完成的步骤，就像我可以返回并编辑我已经完成的细节。

所以这是代码

$('article:not(:last-child) ul li, .continue').click(function() {
    $(this).parents('article').hide().next().fadeIn('slow');
    var index = $('article').index();
    $('.subnav-tabs>.row>.active').find('b').text($(this).find('a').html());

    $(".progress-meter>span").animate({
        "width": "+=20%",
    }, "slow").promise().done(function() {
        $('.subnav-tabs>.row>.active').removeClass('active').next().addClass('active');
    });

});

DEMO

先谢谢。

Answer 1

很难确定要求，但这是我的努力。

JSFiddle：http://jsfiddle.net/91m965L0/3/

$('article:not(:last-child) ul li, .continue').click(function () {
    var $li = $(this);

    // Hide current article and show the next
    var $article = $li.closest('article');
    $article.hide().next().fadeIn('slow');

    // Get index of selected article
    var index = $article.index();

    // Copy the text to the matching slot
    $('.subnav-tabs .row div').eq(index).find('b').text($li.text().substr(0, 5));

    $(".progress-meter>span").animate({
        "width": ((index+1) * 20) + "%",
    }, "slow").promise().done(function () {
        $('.subnav-tabs .row div').eq(index).addClass('active').nextAll();
    });

});

$('.subnav-tabs').on('click', 'div.active', function () {
    var $item = $(this);
    $('article').eq($item.index()).fadeIn('slow').siblings('article').hide();
});

代码已更改为使用菜单和文章的并行索引值以使它们保持同步。进度条现在根据选择计算结束位置，而不是逐步添加20％。您可能希望修改此行为，因为向后移动将减少完成百分比。

注意：您需要为文章提供一个共同的祖先，以便index提供基于0的索引（包括原始菜单div）。

如何从`ul li`中获取值并在另一个`ul li`中写入

1 个答案: