jQuery가있는 장바구니

Question

주문 페이지에서 간단한 장바구니가있는 가상 온라인 상점에서 일하고 있습니다.

: 나는 그러나 몇 가지 문제가 발생 할

 <script> 
    $(function() 
    { 
     $("#selectable").selectable(
     { 
      stop: function() 
      { 
       var result = $("#select-result").empty(); 
       $(".ui-selected", this).each(function() 
       { 
        var index = $("#selectable li").index(this); 
        result.append(" #" + (index + 1)); 
       }); 
      } 
     }); 
     $("#selectable").selectable(
     { 

      selected: function(event, ui) 
      { 
       alert($(ui.selected).attr('id')); 
      } 
     }); 
    }); 
    </script> 

:

 <div class="content"> 
     <div class="divcenter" style="clear:both;"> 
      <form method="post"> 
       <h2>NEW ORDER</h2><br /> 
       <p class="boxlefttitle">Product List</p> 
       <p class="boxrighttitle">Shopping Cart</p> 
       <div class="boxleft"> 
        <ol id="selectable"> 
         <li class="ui-widget-content">Item 1</li> 
         <li class="ui-widget-content">Item 2</li> 
         <li class="ui-widget-content">Item 3</li> 
         <li class="ui-widget-content">Item 4</li> 
         <li class="ui-widget-content">Item 5</li> 
         <li class="ui-widget-content">Item 6</li> 
         <li class="ui-widget-content">Item 4</li> 
         <li class="ui-widget-content">Item 5</li> 
         <li class="ui-widget-content">Item 6</li> 
        </ol> 
       </div> 
       <div class="boxright"> 
        <ol> 
         <!--shopping cart--> 
        </ol> 
       </div> 
       <span>You've selected:</span> <span id="select-result">none</span>. 
       <div style="margin-top: 50px;"><input type="button" value="Add to Basket" onClick="addToBasket();" /></div> 
       <div style="margin-top: 50px;"><p class="small">Quantity:<br /><input type="text" style="width:50px;" /></p></div> 
       <div style="margin-top: 50px;"><input type="button" value="Remove Item" /></div> 
      </form> 

내가 각 목록 항목을 선택합니다 일부 jQuery를 포함했다 : 여기

내가 지금까지 한 일이다
1. 선택한 각 항목을 변수로 가져 오는 방법은 무엇입니까?
2. 장바구니의 각 항목을 정확한 수량으로 각각 표시하는 방법은 무엇입니까? 해결 방법에 대한 아이디어가 있으십니까?

고마워요!

는

PS : (포토샵에서 만든) http://i.imgur.com/KM4LHMB.png

내가 그것을보고 싶지 방법 : 웹 사이트의 현재 모습 http://i.imgur.com/zNrXJ3z.png

Answer 1

내가 여기있는 모든 일을 할 수는 없지만 좋은 출발점이 될 것입니다 . 주요 개념은 선택한 컨테이너를 새 컨테이너 안에 복제하는 것입니다. 내가 jQuery를 clone

이 일치하는 요소의 집합의 깊은 사본을 생성 사용하는 것이 수행합니다.

새로운 코드 : 당신의 빈 addToBasket 기능에

$(function() { 
    $("#selectable").selectable({ 
     stop: function() { 
      var result = $("#select-result").empty(); 
      $(".ui-selected", this).each(function() { 
       var index = $("#selectable li").index(this); 
       result.append(" #" + (index + 1)); 
      }); 
     } 
    }); 

    $("#ulCart").selectable(); 

}); 

function addToBasket() { 
    $(".ui-selected", $("#selectable")).each(function() { 
     $(this).clone().appendTo("#ulCart").removeClass("ui-selected").append("<div class='cartN'>" + $("#qtyCart").val() + "</div>"); 
    }); 
} 

내가 선택한 모든 항목, 그들을 복제하고 ulCart 용기 (바구니 컨테이너)에 추가 얻을; 그 안에는 선택한 수량으로 div를 넣습니다.

분명히 몇 가지 유효성 검사 컨트롤을 넣고 코드를 완성하고 스타일을 개선하십시오!

작동 방식 : http://jsfiddle.net/IrvinDominin/BG8EX/1/