사용자 선택에 따라 2 li의 내용을 바꿉니다

Question

목록 항목의 내용을 바꾸려고합니다. 먼저 하나의 리튬을 클릭 한 다음 다른 것을 클릭하고 내용을 교환하십시오. 처음으로 교환하려고 시도하지만, 매번 새로운 내용이 아닌 원래의 내용을 바꿉니다. 여기에 JSFiddle입니다. data("name", p_name)에

<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). 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 클릭 하나 이상의는 다음 배열에 두 값을 푸시있을 경우, 액티브 표시되고 스왑하고 소문자로 변환 한 다음 data-name을 스왑 한 다음 active 클래스를 제거합니다.

는 바이올린을했다 : http://jsfiddle.net/filever10/88qPZ/