list編集

src/main/resources/static/js/list.js

@@ -7,6 +7,7 @@ $(function(){
 		    $('#showName').empty();
 		    $('#showPrice').empty();
 		    $('#showId').empty();
+		    $('#showStock').empty();
 		    //以下デモ参照
 			//キーボード操作などにより、オーバーレイが多重起動するのを防止する
 			// $( this ).blur() ;	//ボタンからフォーカスを外す
@@ -29,13 +30,18 @@ $(function(){
 		    let priceField = document.createElement("p");
 		    let idField = document.createElement("input");
 		    idField.setAttribute("type", "hidden");
+		    let stockField = document.createElement("p");
 //		    let name = $(event.target.parentNode.children[1].textContent);
 //		    let price =$(event.target.parentNode.children[2].textContent);
 //		    let id =$(event.target.parentNode.children[3].value);
-		    let src = $(event.target.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling).children('img').attr('src');
-		    let name = $(event.target.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.textContent);
-		    let price =$(event.target.parentNode.previousElementSibling.previousElementSibling.textContent);
-		    let id =$(event.target.parentNode.previousElementSibling.value);
+		    let src = $(event.target.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling).children('img').attr('src');
+		    let name = $(event.target.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.textContent);
+		    let price =$(event.target.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.textContent);
+		    let id =$(event.target.parentNode.previousElementSibling.previousElementSibling.value); 
+		    let stock = $(event.target.parentNode.previousElementSibling.value);
+		    stockField.textContent = "点在庫有";
+		    stockField.insertAdjacentHTML('afterbegin', stock.selector);
+		    //stockField.insert = stock.selector;
 		    nameField.textContent = name.selector;
 		    $('#showName').append(nameField);
 		    priceField.textContent = price.selector;
@@ -43,6 +49,7 @@ $(function(){
 		    idField.value = id.selector;
 		    $('#showId').append(idField);
 		    $('#showImage').attr('src', src);
+		    $('#showStock').append(stockField);
 		
 			//[#modal-overlay]、または[#modal-close]をクリックしたら…
 			$( "#modal-overlay,#modal-close" ).unbind().click( function(){

src/main/resources/templates/list.html

@@ -18,6 +18,7 @@
 	        <div class="modalShow" id="showName"></div>
 	        <div class="modalShow" id="showPrice"></div>
 	        <div class="modalShow" id="showId"></div>
+	        <div class="modalShow" id="showStock"></div>
 	        <div class="modalShow" id="showQuantity">
 		        <span>Quantity</span>
 		        <select name="quantity">
@@ -120,6 +121,7 @@
                 <p th:text= "${limitedShoes.name}" class="shoeName shoeLimited">AirMAX</p>
                 <p th:text = "'&yen;' +${limitedShoes.price}" class="shoePrice shoeLimited">￥10,000</p>
                 <input type="hidden" th:value="${limitedShoes.id}"/>
+                <input type="hidden" th:text="${limitedShoes.stock}"/>
                 <div class="detailsBtn"><button type="button" id="modal-open" class="details">Datails</button></div>
                 <!-- <button class="js-modal-open" id="sign-up">Details</button>-->
             </div>
@@ -131,6 +133,7 @@
                 <p th:text= "${generalShoes.name}" class="shoeName">AirMAX</p>
                 <p th:text = "'&yen;' +${generalShoes.price}" class="shoePrice">￥10,000</p>
                 <input type="hidden" th:value="${generalShoes.id}"/>
+                <input type="hidden" th:value="${generalShoes.stock}" />
                 <div class="detailsBtn"><button type="button" id="modal-open" class="details">Datails</button></div>
                 <!-- <button class="js-modal-open" id="sign-up">Details</button>-->
             </div>