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

Question: 1

I am having two ul li elements which will fetch and write the values from one to another.its like writing values from li a to another li b using jquery html function. Everything works fine, despite i need to write only the first 5 characters.

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

Question : 2

问题2

I am have a progress bar which the bar will fills up for each step. For the initial stage the meter will neither go forward nor backward and even the navigation doest work. On filling each step the progress meter will expand and the navigation will add a class active. So once Iam in step 2 or further all i need to enable the navigation for only the steps which I have completed its just like I can go back and edit the details which I completed already.

我有一个进度条,酒吧将填补每一步。在初始阶段,仪表既不会向前也不会向后,甚至导航也都会起作用。在填充每个步骤时,进度表将展开,导航将添加一个活动的类。因此,一旦Iam在第2步或者更进一步,我只需要为我已经完成的步骤启用导航,就像我可以返回并编辑我已经完成的细节一样。

So here is the code

所以这是代码

$('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

Thanks in Advance.

提前致谢。

1 个解决方案

#1

Bit hard to determine requirements, but here is my stab at it.

有点难以确定要求,但这是我的努力。

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

The code has been changed to use the parallel index values of the menus and articles to keep them in sync. The progress bar now calculates the end position based on the selection, and not progressively add 20%. You may want to modify this behavior as going backwards will reduce the completion %.

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

Note: you need to have a common ancestor for the articles in order for index to give 0-based indexes (it included the menu divs in the original).

注意:您需要为文章创建一个共同的祖先,以便索引提供基于0的索引(它包括原始中的菜单div)。

#1