صفحهٔ اصلی گشت‌و‌گذار راهنما
ثبت نام ورود
2001010134
/
RaoYing
1
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

js

Future 3 سال پیش
والد
759ca112e2
کامیت
1913dd84fa
2فایلهای تغییر یافته به همراه77 افزوده شده و 30 حذف شده
مشاهده تقسیم شده نمایش آمار تفاوت ها
  1. 48 10
      src/main/webapp/ShoppingCart.html
  2. 29 20
      src/main/webapp/css/testingCss.css

+ 48 - 10
src/main/webapp/ShoppingCart.html
مشاهده فایل 

@@ -9,8 +9,8 @@
 
 </head>
 
 <body>
 
     <form action="ShoppingCart.html" method="get">
 
-        <div id="Store">
 
-            <a class="lable">
 
+        <div class="Store">
 
+            <a id="lable">
 
                 <input type="checkbox">
 
                 <div id="StoreIcon">
 
                     <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
 
@@ -35,8 +35,8 @@
 
         </div>
 
     
     
-        <div id="Store">
 
-            <a class="lable">
 
+        <div class="Store">
 
+            <a id="lable">
 
                 <input type="checkbox">
 
                 <div id="StoreIcon">
 
                     <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
 
@@ -58,14 +58,31 @@
 
                     </div>
 
                 </div>
 
             </div>
 
+            <div class="goods">
 
+                <input name="selected" type="checkbox">
 
+                <div id="GoodsIcon">
 
+                    <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
 
+                </div>
 
+                <div id="exp">
 
+                    <h3>GoodsC</h3>
 
+                    <p>info & selected</p>
 
+                    <div id="count">
 
+                        <div>-</div>
 
+                        <input name="count" type="text">
 
+                        <div>+</div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <div id="BottomBar">
 
+            <input type="submit" name="submit" value="Delete">
 
+            <input type="submit" name="submit" value="Settle">
 
         </div>
 
-        <input type="submit" name="submit" value="Delete">
 
-        <input type="submit" name="submit" value="Settle">
 
     </form>
 
 
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
     <script>
 
-        $("form>div#Store>div.goods>div#exp>div#count>div").click(function()
 
+        $("form>div.Store>div.goods>div#exp>div#count>div").click(function()
 
         {
 
             if(this.innerHTML == "-")
 
             {
 
@@ -87,7 +104,7 @@
 
                 text.value = num;
 
             }
 
         });
 
-        $("form>div#Store>a.lable>input").change(function()
 
+        $("form>div.Store>a#lable>input").change(function()
 
         {
 
             let items = $(this).parent().parent().children("div.goods").children("input");
 
             // console.dir(items);
 
@@ -96,7 +113,28 @@
 
                 items[i].checked = this.checked;
 
             }
 
         });
 
-        $("form>div#Store>div.goods>div#exp>div#count>input").focusout(function()
 
+        $("form>div.Store>div.goods>input").change(function()
 
+        {
 
+            let lableChecker = $(this).parent().parent().children("a#lable").children("input");
 
+            if(this.checked)
 
+            {
 
+                let otherGoods = $(this).parent().parent().children("div.goods").children("input").not(this);
 
+                for(let i = 0; i < otherGoods.length; ++i)
 
+                {
 
+                    console.dir(otherGoods[i].checked);
 
+                    if(!otherGoods[i].checked)
 
+                    {
 
+                        return;
 
+                    }
 
+                }
 
+                lableChecker.prop("checked", true);
 
+            }
 
+            else
 
+            {
 
+                lableChecker.prop("checked", false);
 
+            }
 
+        })
 
+        $("form>div.Store>div.goods>div#exp>div#count>input").focusout(function()
 
         {
 
             let num = Number.parseInt(this.value);
 
             if(num.toString() == "NaN") num = 0;
 
@@ -112,7 +150,7 @@
 
             if(num.toString() == "NaN") num = 0;
 
             this.value = num;
 
         });
 
-        $("form>input[type='submit']").click(function()
 
+        $("form>div#BottomBar>input[type='submit']").click(function()
 
         {
 
             let counts = $("form>div#Store>div.goods>div#exp>div#count>input");
 
             for (let index = 0; index < counts.length; index++) {

+ 29 - 20
src/main/webapp/css/testingCss.css
مشاهده فایل 

@@ -12,12 +12,12 @@ body{
 
 form
 
 {
 
     border-radius: 10px;
 
-    position: relative;
 
+    /* position: relative; */
 
     width: 100%;
 
     min-height: 100px;
 
     min-width: 500px;
 
 }
 
-form>div#Store
 
+form>div.Store
 
 {
 
     position: relative;
 
     margin-top: 10px;
 
@@ -28,19 +28,19 @@ form>div#Store
 
     font-size: 16px;
 
     overflow: hidden;
 
 }
 
-/* div#Cartlist>div#Store:last-child
 
+/* div#Cartlist>div.Store:last-child
 
 {
 
     margin-bottom: 0;
 
 } */
 
-form>div#Store>*{
 
+form>div.Store>*{
 
     border-bottom: 1px solid gainsboro;
 
 }
 
 
-form>div#Store>*:last-child{
 
+form>div.Store>*:last-child{
 
     border-bottom: 0;
 
 }
 
 
-form>div#Store>a.lable
 
+form>div.Store>a#lable
 
 {
 
     height: 48px;
 
     line-height: 48px;
 
@@ -49,14 +49,14 @@ form>div#Store>a.lable
 
     overflow: hidden;
 
     background-color: transparent;
 
 }
 
-form>div#Store>a.lable>input
 
+form>div.Store>a#lable>input
 
 {
 
     height: 24px;
 
     width: 24px;
 
     margin: 12px;
 
     margin-left: calc(1ch + 12px);
 
 }
 
-form>div#Store>a.lable>div#StoreIcon
 
+form>div.Store>a#lable>div#StoreIcon
 
 {
 
     height: 40px;
 
     width: 40px;
 
@@ -64,31 +64,31 @@ form>div#Store>a.lable>div#StoreIcon
 
     margin-left: calc(1ch + 4px);
 
     text-align: center;
 
 }
 
-form>div#Store>a.lable>div#StoreIcon>img
 
+form>div.Store>a#lable>div#StoreIcon>img
 
 {
 
     max-width: 100%;
 
     max-height: 100%;
 
 }
 
-form>div#Store>a.lable>h3
 
+form>div.Store>a#lable>h3
 
 {
 
     margin: 0;
 
 }
 
 
-form>div#Store>div.goods{
 
+form>div.Store>div.goods{
 
     height: 96px;
 
     display: flex;
 
     justify-items: center;
 
     overflow: hidden;
 
     background-color:transparent;
 
 }
 
-form>div#Store>div.goods>input{
 
+form>div.Store>div.goods>input{
 
     height: 24px;
 
     min-width: 24px;
 
     margin: 36px;
 
     margin-left: calc(1ch + 12px);
 
     margin-right: calc(1ch + 12px);
 
 }
 
-form>div#Store>div.goods>div#GoodsIcon
 
+form>div.Store>div.goods>div#GoodsIcon
 
 {
 
     height: 88px;
 
     min-width: 88px;
 
@@ -96,24 +96,24 @@ form>div#Store>div.goods>div#GoodsIcon
 
     margin-left: calc(1ch + 4px);
 
     text-align: center;
 
 }
 
-form>div#Store>div.goods>div#GoodsIcon>img
 
+form>div.Store>div.goods>div#GoodsIcon>img
 
 {
 
     max-width: 100%;
 
     max-height: 100%;
 
 }
 
-form>div#Store>div.goods>div#exp
 
+form>div.Store>div.goods>div#exp
 
 {
 
     position: relative;
 
     margin: 8px;
 
     height: 80px;
 
     width: 100%;
 
 }
 
-form>div#Store>div.goods>div#exp>*
 
+form>div.Store>div.goods>div#exp>*
 
 {
 
     width: 100%;
 
     margin: 0;
 
 }
 
-form>div#Store>div.goods>div#exp>div#count
 
+form>div.Store>div.goods>div#exp>div#count
 
 {
 
     position: absolute;
 
     width: 25%;
 
@@ -127,7 +127,7 @@ form>div#Store>div.goods>div#exp>div#count
 
     display: flex;
 
     overflow: hidden;
 
 }
 
-form>div#Store>div.goods>div#exp>div#count>*{
 
+form>div.Store>div.goods>div#exp>div#count>*{
 
     width: 100%;
 
     height: 100%;
 
     margin: 0;
 
@@ -138,15 +138,24 @@ form>div#Store>div.goods>div#exp>div#count>*{
 
     background-color: white;
 
     user-select: none;
 
 }
 
-form>div#Store>div.goods>div#exp>div#count>*:hover
 
+form>div.Store>div.goods>div#exp>div#count>*:hover
 
 {
 
     background-color: gainsboro;
 
 }
 
-form>div#Store>div.goods>div#exp>div#count>*:active
 
+form>div.Store>div.goods>div#exp>div#count>*:active
 
 {
 
     background-color: gray;
 
 }
 
 
+form>div#BottomBar
 
+{
 
+    position: fixed;
 
+    right: 0;
 
+    bottom: 0;
 
+    width: 100%;
 
+
 
+}
 
+
 
 
 @font-face
 
 {