jQuery 루프? 복제? 단순히 이유는 무엇입니까?

Question

NEW 버전 (없는 새로운 문제는 ...)

그래서, 나는 .click();과 .html();과 함께 "루프"문제가있어.

XML의 datas 검색 : OK

function afficher(NomPizz, Prix1, Prix2, Prix3) {//HERE IS MY CODE//}); 

화면에 인쇄 : 다른 사업부에 OK

$('#pricecontainer').show(); //Display my container and put values in with .html(); 
$('#prix1').html('SOLO 1P<p id="p1" style="line-height:10px;">' + Prix1.toFixed(2) + '</p>'); 
$('#prix2').html('MAXI 2P<p id="p2" style="line-height:10px;">' + Prix2.toFixed(2) + '</p>'); 
$('#prix3').html('SUPER 4P<p id="p3" style="line-height:10px;">' + Prix3.toFixed(2) + '</p>');​ 

추가] 값을 클릭하면 : OK하지만 하지

을

Everithing 작품 ... 한 번! 더 많은 시간을 클릭하면 그 값이 "복제"됩니다.

한 번 클릭하면 1 개의 항목이 추가됩니다.

내가 가지고 :

두 번 클릭 1 OK.

나는 3, 이전 하나 두 개 더있어!

세 번 클릭하십시오.

나는 6, 이전 세와 THRE 더있어!

기타 ... 등 ... 내가 내 function afficher();에이 코드 을 넣어

해결책은 단 하나 내가 찾은 ... BAD 하나!

$("clickedItemId").click(function() { 
    var Figure = $(this).find('p').html(); 
    totalArea.value += '+' + Figure; 
    var Screen = totalArea.value.replace(/'/g, ' '); 
    var result = eval(Screen); 
    totalArea.value = result; 
    var $newItem = "<span style='float:left'>1 " + NomPizz.toUpperCase() + "</span><span style='float:right'>" + Figure + "</span><br/>"; 
    $('<div><div>').html($newItem).appendTo(RecapTick); 
    Display2.value = "TOTAL (EUR): " + totalArea.value; 
    $('#pricecontainer').hide(); 
});​ 

그래서, 전체 코드 내 function afficher();은 다음과 같습니다

function afficher(NomPizz, Prix1, Prix2, Prix3) { 
    var totalArea = document.getElementById('totalArea'); 
    var Display2 = document.getElementById('Display2'); 
    var RecapTick = document.getElementById('MidTiTx'); 
    $('#pricecontainer').show(); 
    $('#prix1').html('SOLO 1P<p id="p1" style="line-height:10px;">' + Prix1.toFixed(2) + '</p>'); 
    $('#prix2').html('MAXI 2P<p id="p2" style="line-height:10px;">' + Prix2.toFixed(2) + '</p>'); 
    $('#prix3').html('SUPER 4P<p id="p3" style="line-height:10px;">' + Prix3.toFixed(2) + '</p>'); 
    //BUG HERRERRERERERERER 
    $("clickedItemId").click(function() { 
     var Figure = $(this).find('p').html(); 
     totalArea.value += '+' + Figure; 
     var Screen = totalArea.value.replace(/'/g, ' '); 
     var result = eval(Screen); 
     totalArea.value = result; 
     var $newItem = "<span style='float:left'>1 " + NomPizz.toUpperCase() + "</span><span style='float:right'>" + Figure + "</span><br/>"; 
     $('<div><div>').html($newItem).appendTo(RecapTick); 
     Display2.value = "TOTAL (EUR): " + totalArea.value; 
     $('#pricecontainer').hide(); 
    }); 
};​ 

---

---

PS 내가 여기 게시물의 이전 버전 (다른 코드와 같은 PB)을 라이브 :

제 프로는 다음과 같습니다.

[라이브 데모] [1]

편집 : [다운로드 소스] [2]

그것은 XML 파일에서 제품 목록을 검색하는 간단한 카트입니다. 이 부분은 작동합니다!

클릭 할

이 제품은 아래의 목록에 추가,하지만 당신은 같은에 반복적으로 클릭하면 , 이들의 총 내가 박히 곳입니다 ... 추가되어야합니다!

tot = parseInt(jQuery(this).find('.prow').html()); 

하려면 :

나는 선 (62)을 변경하려고

tot = parseInt(jQuery(this).find('.prow').html()+1); 

하지만 작동하지 않습니다 ... 나는 문제가 내가 사용하고 있다고 생각합니다. .click();과 onclick = "" 방법 ??? 아니면 "var"이라는 나쁜 이유로 사용 하시겠습니까?

제발 누군가 나를 밝혀주세요! 여기

내 jsCode입니다 :

function calculate(){ 
    var tot = 0; 
    jQuery(".totprice").each(function(e,b){ 
     tot += parseInt(jQuery(this).text()); 
    }); 
    return jQuery("#amt").html("$"+tot); 
} 

function showprod(){ 
    jQuery(".prod").each(function(e){ 
     jQuery(this).delay(500*e).fadeIn('fast'); 
    }); 
} 

function clearcart(){ 
    jQuery("#clear").live('click',function(){ 
     jQuery(".tetew").fadeIn(4000,function(){ 
      jQuery(this).remove(); 
      calculate(); 
     }); 
    }); 
} 

function delete_ajax(){ 
    jQuery(".del").live('click',function(e){ 
     var a = jQuery(this); 
     var p = a.parent().parent().parent().parent().parent(); 
     if(p){ 
      p.fadeOut('slow',function(){ 
       jQuery(this).remove(); 
       calculate(); 
      }); 
     } 
    }); 
} 

function addtocart(){ 
jQuery(".addtocart").click(function(e){ 
     var getprod = jQuery(this).attr("prodid"); 
     var getval = jQuery(this).attr("prodval"); 

     jQuery("#msg").fadeIn('slow'); 

     jQuery.ajax({ 
      type:'GET', 
      url:'db.xml', 
      dataType:'xml', 
      success: function(xml){ 
       jQuery(xml).find('databases').each(function(){ 
        jQuery(this).find('prod').each(function(e){ 
        var db_id = jQuery(this).attr('id'); 

        jQuery("#msg").fadeOut('slow'); 
         if(getprod == db_id){ 
          var cookies = 1; 
          jQuery(".tetew").each(function(){ 
           var _this = jQuery(this); 
           var _store = _this.find('.pstore'); 
           var ident = _this.find('.pqty'); 

           if(getprod == ident.text()){ 
            var tot = parseInt(jQuery(this).find('.prow').html()); //Put a +1 here won't work... 
            jQuery(this).find('.prow').html(tot); 
             var restot = parseInt(jQuery(this).find('.prow').text()) * parseInt(jQuery(this).find('.price').text()); 
             jQuery(this).find('.totprice').html(restot); 
            cookies = 0; 
            return false; 
           }else{ 
            cookies = 1; 
           } 
          }); 

          if(cookies == 1){ 

          var results = "<div class='tetew'>"; 
           results +="<table>"; 
           results +="<tr>"; 
           results +="<td class='pqty' style='display:none' valign='top'>" + jQuery(this).attr("id") + "</td>"; 
           results +="<td class='img' valign='top'><img src='" + jQuery(this).attr('img') + "' width='40' height='40' /></td>"; 
           results +="<td class='pstore' valign='top'>" + jQuery(this).text() + "</td>";    
           results +="<td class='prow' valign='top'>1</td>";       
           results +="<td class='price' valign='top'>" + jQuery(this).attr('price') + "</td>";      
           results +="<td class='totprice' valign='top'>" + jQuery(this).attr('price') + "</td>"; 
           results +="<td valign='top'><a href='javascript:void(0)' class='del'>Delete</a></td>"; 
           results +="</tr>"; 
           results +="</table>"; 
           results +="</div>"; 
          } 

          jQuery(".tetew:eq("+e+")").hide().fadeIn('fast'); 
           jQuery("#addto").append(results); 
           calculate(); 
          return false; 
         } 
        }); 

       }); 
      } 
     }); 

    }); 
} 

function loadXMLdb() { 
     $.ajax({ 
      type: "GET", 
      url: "db.xml", 
      dataType: "xml", 
      success: function(xml) { 
       $(xml).find('prod').each(function() { 
        var _Nom = jQuery(this).text(); 
        var Col1 = jQuery(this).attr('id'); 
        var Col2 = jQuery(this).attr('price'); 
        var Col3 = $(this).find('grand').text(); 
        $('<div class="prod" style="display:block;" onclick="addtocart();"></div>').html(_Nom + '<br /><img 

SRC = "이미지/pizza.png">
Ajouter ') appendTo();. "vprod."

   }); 
      } 
     }); 

    } 

jQuery(document).ready(function(){  
    showprod(); 
    clearcart(); 
    addtocart();  
    delete_ajax(); 
loadXMLdb(); 
}); 

[1] : http://bzez.0fees.net/examples/jCart/ [2] : http://bzez.0fees.net/examples/jCart/jCart.zip

Answer 1

I는 자바 스크립트 코드의 재 기입을 제안하고자. 이 상태에서

---

을 (때로는이 정말 당신이 명확한 해결책을 얻을 도움이 될 것입니다 것은)는/디버그를 읽을 매우 복잡하고 어렵다. 나중에이 방법으로 더 많은 버그가있을 것입니다.

로컬에서 재생성하고 루프를 시도한 경우 두 번 이상 반복되고 있습니다.그리고 당신은 완전히 jQuery를 셀렉터를 활용하지 않는 , 내가 집에 갈 때 QUES 오늘 밤에 대답하고, 좀 더 솔루션을 제공 할 수 있습니다 http://api.jquery.com/category/selectors/

그것을 찾아주십시오. 그동안 을 다시 작성하십시오.

이렇게 해보십시오. TR

var obj = $('#table tr#prod_id_2').find('.prow'); 

var new_qty = obj.html() * 1; //gets current qty 
new_qty = new_qty + 1; 

obj.html(new_qty); 

Answer 2

에 product_ids을 넣어 당신이 오직 각 항목의 1을 가질 수 있도록 카트 만, xml 파일에있는 것을 반영하는 것으로 보인다. 나는 당신이 당신의 문제를 다르게 바라 볼 것을 제안한다.

이런 식으로 뭔가를 시도 :

다음

var cart = []; 

var items = [ 
    {id:1, price:100, name:"Catch Arena"}, 
    {id:2, price:400, name:"Pepperonni"}, 
    {id:3, price:1400, name:"Fruits de Mer"}, 
    {id:4, price:1400, name:"Chickenita"}, 
]; 

가 함께 장바구니에 항목을 추가 :

<a href="#" onclick="addToCart(0);">Add Catch Arena</a> 
<a href="#" onclick="addToCart(1);">Add Pepperonni</a> 
<a href="#" onclick="addToCart(2);">Add Fruits de Mer</a> 
<a href="#" onclick="addToCart(3);">Add Chickenita</a> 

내가 여기있어 한 addToCart와 배열의 인덱스 (제로 기반)을 사용 :

window.addToCart = function(idx) { 
    cart.push(items[idx]); 
    displayCart(); 
}; 

지금 당신이 카트를 가지고, 당신은 그것을 표시해야합니다

<div id="ShoppingCart">Your cart is empty</div> 
<div id="total"></div> 
... 
window.displayCart = function() { 
    var cartHtml = []; 
    var cartTotal = 0; 
    for (i=0; i<cart.length; i++) { 
     cartHtml.push("<div>" + cart[i].name + ", " + cart[i].price + "</div>"); 
     cartTotal += cart[i].price; 
    } 
    $('#total').html(cartTotal); 
    $('#ShoppingCart').html(cartHtml.join('')); 
}; 

은 내가 jsfiddle이 실행있어 : http://jsfiddle.net/R4rzC/이

나는 카트 아마 등 백엔드 데이터베이스와 동기화해야로서이 어느 것이 가장 좋습니다 언급하지 않았다, 그러나 나는이 말을 감히 기술적 인 이유 때문에 장바구니를 구현하는 이유는 js입니다.

Answer 3

잠자기 후 몇 가지 해결책을 찾았습니다.

클릭 한 요소 정보를 검색하고 onclick="poster(NomPizz, Prix)"에 의해 호출 된 function poster();을 새로 작성했습니다. 사람이 더 나은 아이디어가 있으면 내가 할게요

: 여기

는 작업 새로운 코드입니다!

function afficher(NomPizz, Prix1, Prix2, Prix3) { 
      var totalArea = document.getElementById('totalArea'); 
      var Display2 = document.getElementById('Display2'); 
      $('#pricecontainer').show(); \\Added <div> above 
      $('#prix1').html('<div onclick="poster(\''+NomPizz+'\','+Prix1+')">SOLO 1P '+Prix1.toFixed(2)+'</div>'); 
      $('#prix2').html('<div onclick="poster(\''+NomPizz+'\','+Prix2+')">MAXI 2P '+Prix2.toFixed(2)+'</div>'); 
      $('#prix3').html('<div onclick="poster(\''+NomPizz+'\','+Prix3+')">SUPER 4P '+Prix3.toFixed(2)+'</div>'); 
      }; 

//NEW FUNCTION 
function poster(NomPizz, Prix) { 
      var RecapTick = document.getElementById('MidTiTx'); 
      totalArea.value += '+'+ Prix; 
      var Screen = totalArea.value.replace(/'/g, ' '); 
      var result = eval(Screen); 
      totalArea.value = result.toFixed(2); 
      var $newItem = "<span style='float:left'>1 " + NomPizz.toUpperCase() + "</span><span style='float:right'>" + Prix.toFixed(2)+"</span><br/>"; 
      $('<div><div>').html($newItem).appendTo(RecapTick); 
      Display2.value = "TOTAL (EUR): "+totalArea.value; 
      $('#pricecontainer').hide(); 
};