jquery Не забирает значения двух блоков

104

13 января 2021, 07:50

Не знаю как исправить. Необходимо,чтобы при клике на один из блоков в массив(переменную) записывалось значение блока, а при клике на второй блок значение записывалось в следующий элемент массива(другую переменную).Больше двух одновременно нажатых кнопок быть не должно.Значения двух блоков должны выводиться в alert сразу после выделения второго блока черной рамкой. Помогите, кто знает.

var act_cout=0; 
var i=0; 
var  val= new Array(); 
$(document).ready(function(){ 
 
 
	$('.card').on("click",function(){ 
			$(this).addClass("active"); 
			 
			val[i]=$(this).parent(".pole").find('div.active').text(); 
			 
			 
		 
		 
			 
			i++; 
			if ( i>2) { 
				alert(val[0]+val[1]); 
				$('.active').removeClass("active");  
 
		} 
		}); 
	 
		 
 
	});

.pole { 
  display: flex; 
} 
.active { 
  border: 4px solid black; 
} 
.card { 
  height: 200px; 
  width: 100px; 
  background-color: red; 
  margin-left: 10px; 
  margin-top: 10px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<head> 
	<link rel="stylesheet" type="text/css" href="piraStyle.css"> 
	<title>piramid</title> 
</head> 
<body> 
	<div class="pole"> 
		<div class="card">8</div> 
		<div class="card">5</div> 
		<div class="card">4</div> 
		<div class="card">9</div> 
		<div class="card">5</div> 
		<div class="card">8</div> 
 
	</div> 
	 
	<script src="code.js"></script> 
</body>

Answer 1

let sum = 0; 
let val= new Array(); 
$(document).ready(function(){ 
 
 
	$('.card').on("click",function(){ 
			$(this).addClass("active"); 
			 
			 
			val.push($(this).text()); 
		 
			 
			if ( val.length === 2) { 
				val.forEach(function(e){ 
          sum = sum + parseInt(e); 
        }); 
        alert(sum); 
        sum = 0; 
				$('.active').removeClass("active");  
        val = new Array(); 
 
		} 
		}); 
	 
		 
 
	});

.pole { 
  display: flex; 
} 
.active { 
  border: 4px solid black; 
} 
.card { 
  height: 200px; 
  width: 100px; 
  background-color: red; 
  margin-left: 10px; 
  margin-top: 10px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<head> 
	<link rel="stylesheet" type="text/css" href="piraStyle.css"> 
	<title>piramid</title> 
</head> 
<body> 
	<div class="pole"> 
		<div class="card">8</div> 
		<div class="card">5</div> 
		<div class="card">4</div> 
		<div class="card">9</div> 
		<div class="card">5</div> 
		<div class="card">8</div> 
 
	</div> 
	 
	<script src="code.js"></script> 
</body>