Question

我想要一些像这样的功能：你点击一个名字，如Mary Smith，它会在另一个ul和li元素中动态生成数据名称值。我有那部分工作，但是，我需要它不要将所有li元素更改为该值。每次单击Mary Smith或Tom Jones时，都需要创建具有该值的li，而不是更改现有值。

你可以在这里找到小提琴：http://jsfiddle.net/rsxavior/zHkS8/3/基本上我需要它来运行，好像.account-select类可以被认为是函数的'this'值。我不知道如何去做。

<ul>
    <li><a href="#" class="account" data-name="John Smith">John Smith</a></li>
    <li><a href="#" class="account" data-name="Mary Jones">Mary Jones</a></li>
</ul>

<ul class="account-hidden-li"></ul>

$('.account').click(function () {
    $('.account-hidden-li').append('<li class="account-select"><a class="close bcn-close" data-dismiss="alert" href="#">&times;</a></li>');
    $('.account-select').text($(this).data("name")).prependto();
});

http://jsfiddle.net/rsxavior/tS9H8/9/

Answer 1

您可以使用:last选择器：

$('.account-select:last a').text($(this).data("name"));

http://jsfiddle.net/FwTYe/

或者：

$('.account').click(function () {   
    var txt =  $(this).data("name");
    $('<li/>', {
        'class': 'account-select',
        'html': '<a class="close bcn-close" data-dismiss="alert" href="#">'+txt+'</a>'
    }).appendTo('.account-hidden-li')
});

http://jsfiddle.net/42FYA/

Answer 2

我有点困惑，我认为您的代码中可能还有其他错误。使用.text()，您将清除每个li.account-select中的<a>元素。

我认为这可以解决您的问题并保留您的“关闭”链接：

$('.account').click(function () {
    $('.account-hidden-li').append('<li class="account-select">'+$(this).data("name")+'<a class="close bcn-close" data-dismiss="alert" href="#">&times;</a></li>');
});

使用JQuery基于data-attribute动态创建li

2 个答案: