Clickイベントで画像が消える問題（JavaScript）

Question

私は、JavaScriptの割り当てのためのストアを構築することになっています。店内には3つのアイテムと合計アイテムを計上するカウンターがあります。各項目は、htmlで定義されたデータ属性に基づいて値を変更するclickイベントによって更新されます。その後、これをクッキーに保存し、チェックアウトページにアクセスしたときに保存された内容を使用することができます。 Cookieストアと合計が更新されますが、残念ながらクリックイベントが発生するたびにイメージは消えます。私はコードを精練しているが、なぜこれが起こっているのか分からない。誰も助けることができますか？

$(document).ready(function() { 
 
    $("#jeans-line").text(Cookies.get("jeans") || 0) 
 
    $("#jeanJacket-line").text(Cookies.get("jeanJacket") || 0) 
 
    $("#belt-line").text(Cookies.get("belt") || 0) 
 
    $("#total").text(Cookies.get("total") || 0) 
 
    //The DOM will be changed to the key value of each cookie or 0 
 

 
    $('.item').click(function() { 
 
    itemTotal = parseInt($(this).text()) 
 
    oneMore = itemTotal + ($(this).data('cost')) 
 
    $(this).text(oneMore) 
 
    Cookies.set($(this).data('name'), oneMore) 
 
    setTotal() 
 
    }); 
 

 
    // //updating the total cost of the pseudo-items in shopping 
 

 
    function setTotal() { 
 
    var jeans = parseInt(Cookies.get("jeans")) 
 
    var jeanJacket = parseInt(Cookies.get("jeanJacket")) 
 
    var belt = parseInt(Cookies.get("belt")) 
 

 
    Cookies.set("total", (jeans + jeanJacket + belt) || 0) 
 
    $("#total").text(Cookies.get("total") || 0) 
 
    }; 
 

 
    //Enter data and close the modal 
 
    var modal = $("#modal-box") 
 
    var email_input; 
 

 
    $(".email-submit").click(function(e) { 
 
    e.preventDefault(); 
 
    email_input = $("#email-val").val() 
 
    console.log(email_input) 
 
    var checkEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
 

 
    if (checkEmail.test(email_input)) { 
 
     alert("This is a good email!") 
 
     Cookies.set("email", email_input) 
 
     modal.css("display", "none") 
 
    } else { 
 
     alert("This is not a valid email address!") 
 
    } 
 
    }); 
 

 
    //closes the model with close click event 
 
    $(".close").click(function() { 
 
    modal.css("display", "none"); 
 
    }); 
 

 
}) //closes document.ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 

 
    <div class="col-md-4"> 
 
    <div class="item" data-cost="200" data-name="jeans"> 
 
     <img id="jeansIMG" src="images/jeans.jpg"> 
 
     <h2 class="item" id="jeans-line"></h2> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-md-4"> 
 
    <div class="item" data-cost="300" data-name="jeanJacket"> 
 
     <img id="jeanJacketIMG" src="images/jean_jacket.jpg"> 
 
     <h2 class="item" id="jeanJacket-line"></h2> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-md-4"> 
 
    <div class="item" data-cost="50" data-name="belt"> 
 
     <img id="beltIMG" src="images/belt.jpg"> 
 
     <h2 class="item" id="belt-line"></h2> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-- closes the bootstrap row --> 
 

 
<div class="row"> 
 
    <div class="col-md-4"> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <img class="shoppingCart" src="images/shopping_cart.jpg"> 
 
    <h2 class="totalTitle">The total for these pseudo-products is:</h2> 
 
    <h2 id="total"></h2> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    </div> 
 
</div>

Answer 1

画像が削除を取得している理由は、このためのコードは次のとおりです。

あなたの全体的なコードを見て

$('.item').click(function() { 
    itemTotal = parseInt($(this).text()) 
    oneMore = itemTotal + ($(this).data('cost')) 
    $(this).text(oneMore) // <-- this overrides everything inside div.item 
    Cookies.set($(this).data('name'), oneMore) 
    setTotal() 
}); 

、私は何か他のものにインナーitemクラスを変更することをお勧めしたいです（例：item-total）、外側のitemクラスと競合することはありません。

$('.item').click(function() { 
    itemTotal = parseInt($(this).text()) 
    oneMore = itemTotal + ($(this).data('cost')) 
    $('.item-total', this).text(oneMore) // <!-- change text in item-total 
    Cookies.set($(this).data('name'), oneMore) 
    setTotal() 
}); 

ます。また、それはunclicked左一つ以上の項目があっても、適切に合計を計算するようにsetTotalがデフォルト値|| 0を追加するために変更することがあります。：

function setTotal() { 
var jeans = parseInt(Cookies.get("jeans") || 0) 
var jeanJacket = parseInt(Cookies.get("jeanJacket") || 0) 
var belt = parseInt(Cookies.get("belt") || 0) 

Cookies.set("total", (jeans + jeanJacket + belt) || 0) 
$("#total").text(Cookies.get("total") || 0) 
}; 

その後javascriptのコードを調整

あなたは、完全なコードをダンプすることはありませんhttps://jsfiddle.net/nm5dL9h1/