Merge pull request #25 from moevm/bogdanov_choice

update choice
moevm · Dec 11, 2024 · 9c52912 · 9c52912
2 parents 089562c + 482bd3b
commit 9c52912
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/main/_front/src/html/elems/choice.html b/main/_front/src/html/elems/choice.html
@@ -12,7 +12,7 @@
 <body>
 <div class="section">
     <div class="container">
-<!--     Разумеется, элемент ниже не нужен. Он добавлен для пояснения и разграничений       -->
+        <!--     Разумеется, элемент ниже не нужен. Он добавлен для пояснения и разграничений       -->
         <div style="margin-top: 20px;">Сортировать по показателю</div>
         <div class="choice" id="sort_by">
             <button class="choice__elem active" data-value="price">Цена</button>
@@ -39,7 +39,7 @@
         </div>
         <!--     Разумеется, элемент ниже не нужен. Он добавлен для пояснения и разграничений       -->
         <div style="margin-top: 20px;">Выберите сокет (разъем для процессора на материнской плате)</div>
-        <div class="choice choice-grid" style="width: 236px">
+        <div class="choice choice-grid" style="width: 236px" id="type">
             <button class="choice__elem choice__elem-with_img active" data-value="cpu">
                 <svg width="40.000000" height="40.000000" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                     <g clip-path="url(#clip2_90)">
@@ -170,7 +170,10 @@
                 Корпус
             </button>
         </div>
+        <button class="btn" style="margin-top: 20px; margin-left: 300px; margin-bottom: 30px;" id="change_parameter">Изменить параметр</button>
+
     </div>
+
 </div>
 </body>
 </html>
diff --git a/main/_front/src/js/elems/choice.js b/main/_front/src/js/elems/choice.js
@@ -12,7 +12,7 @@ choiceLists.forEach((choiceList) => {
 				if (choice === e.target) {
 					choiceList.dataset.value = choice.dataset.value;
 					choice.classList.add("active");
-					console.log(choice.dataset.value);
+					// console.log(choice.dataset.value);
 				}else {
 					choice.classList.remove("active");
 				}
@@ -21,4 +21,23 @@ choiceLists.forEach((choiceList) => {
 	});
 })
 
+const choiceChange = (list, value) => {
+	const items = list.querySelectorAll(".choice__elem");
+	items.forEach((item) => {
+		if (item.dataset.value === value) {
+			item.classList.add("active");
+			list.dataset.value = value;
+		}else {
+			item.classList.remove("active");
+		}
+		console.log(item.dataset.value === value);
+	})
+}
+
 
+const change_parameter = document.querySelector("#change_parameter");
+console.log(change_parameter);
+change_parameter.addEventListener("click", (e) => {
+	choiceChange(document.querySelector("#type"), "gpu");
+})
+