Question

我正在尝试交换列表项内容。首先，我点击一个li，然后点击另一个并交换他们的内容。它是我第一次尝试交换时工作，但每次之后，它都会交换li的原始内容，而不是新内容。这是JSFiddle。

<ul class="icecream">
    <li class="favorite" data-position="1" data-name="neopolitan">Neopolitan</li>
    <li class="favorite" data-position="2" data-name="mintchip">Mint Chip</li>
    <li class="favorite" data-position="3" data-name="vanilla">Vanilla</li>
    <li class="option" data-position="NA" data-name="chocolate">Chocolate</li>
    <li class="option" data-position="NA" data-name="cookiesncream">Cookies'n'Cream</li>
    <li class="option" data-position="NA" data-name="rockyroad">Rocky Road</li>
</ul>

$(document).on("click",  "ul.icecream>li" , function(){
     if($("ul.icecream>li").hasClass("active")){
         if($(this).hasClass("subactive")){
             $(this).removeClass("subactive");
         }
         else{
             var p1_name = $("ul.icecream>li.active").data("name");
             var p_name = $(this).data("name");
             $(this).attr("data-name", p1_name).text(p1_name);
             $("ul.icecream>li.active").attr("data-name", p_name).text(p_name).removeClass("active");
         }
     }
     else{
         $(this).addClass("active");
     }
 });

Answer 1

将attr("data-name", p_name)更改为data("name", p_name)。对p1_name执行相同操作。 attr在某处是腐败的东西。

http://jsfiddle.net/Vm7Uq/43/

Answer 2

这可能会更容易

$('li.option,li.favorite').on('click', function() {
    $(this).toggleClass('active');//toggle active
    if ($('li.active').length>1) {//if more than 1
        var na = [];//make array
        $('li.active').each(function() { var th = $(this).text(); na.push(th); })//for each active, get text & push to array
        .each(function(i) {
            i = i ? 0 : 1;//swap i
            $(this).data('name', na[i].toLowerCase()).text(na[i]).removeClass('active');//swap info & remove active   
        });
    }
});

每次点击li.option或li.favorite并标记为活动时，如果有多个，则将两个值推送到数组并交换它们，将其转换为小写并交换{ {1}}，然后移除data-name类。

做了一个小提琴：http://jsfiddle.net/filever10/88qPZ/

根据用户选择交换2 li的内容

2 个答案: