Как получить значение value из тега li?

283

13 мая 2018, 07:10

Решил заменить чекбоксы с помощью списка ul и стилизовать. В итоге столкнулся с проблемой.

Как взять data-attr значение из списка li ?

И если выбрать другой li, то выберется соответствующий data-attr.

Пробовал эти варианты, но там почему-то берется только первый li и больше не переключается:

function costCalculator() {
    document.getElementById('result').innerHTML = parseInt(document.getElementById('area').value) + 1;
}

function costCalculator() { 
  result.innerHTML = parseInt(area.value) + $('.rooms.active').attr('data-attr');
}

\ \ \ \

Песочница для экспериментов: https://jsfiddle.net/Mesuti/5kugx8j6/5/

  <ul id="room">
      <li class="rooms active" data-attr="5">1 комнатная</li>
      <li class="rooms" data-attr="10">2 комнатная</li>
      <li class="rooms" data-attr="15">3 комнатная</li>
    </ul>
<input id="area" type="text" value="1" placeholder="Введите площадь">
    <h2>Результат: </h2>
    <span id="result"></span>

// Математика Input + Data-attr. ВМЕСТО XXXXXXX НУЖНО ВЗЯТЬ ЗНАЧЕНИЕ LI. ЕСЛИ ВЫБИРАТЬ ДРУГОЙ LI, ТО ЗНАЧЕНИЕ МЕНЯЕТСЯ.

function costCalculator() { 
result.innerHTML = parseInt(area.value) + XXXXXXX;
}

Answer 1

чтобы значение из data-attr складывалось со значением площади area необходимо привести значение к числу с помощью parseInt():

parseInt($('.rooms.active').attr('data-attr'))

Кроме того при переходе на следующую вкладку необходимо делать пересчет, т.е. вызывать функцию costCalculator по клику на вкладке.

$('#kvart').click(function() { 
		$('#area').fadeOut(100, function () { 
     $('#room').fadeIn('100');  
  }); 
});  
 
$('#house').click(function() { 
		$('#room').fadeOut(100, function () { 
     $('#area').fadeIn('100');  
  }); 
});  
 
$('#kommerc').click(function() { 
		$('#room').fadeOut(100, function () { 
     $('#area').fadeIn('100');  
  }); 
});  
 
$('#home').on('click', 'li', function(){ 
		$(this).addClass('active').siblings().removeClass('active'); 
}); 
 
$('#room').on('click', 'li', function(){ 
		$(this).addClass('active').siblings().removeClass('active'); 
    costCalculator(); 
}); 
 
 
function onInput() { 
	costCalculator(); 
} 
 
// Математика Input + Data-attr  
function costCalculator() {  
result.innerHTML = parseInt(area.value) + parseInt($('.rooms.active').attr('data-attr')); 
} 
 
document.getElementById('area').addEventListener('input', onInput);

.characteristic { 
    list-style: none; 
    margin-left: 0; 
    opacity: 1; 
} 
 
.characteristic li { 
  display: inline-block; 
  border: #F03226 solid 1px; 
  padding: 14px 24px; 
  color: #606060; 
  transition: all 0.2s linear; 
} 
 
.characteristic li:hover { 
    background-color: #F03226; 
    color: white; 
    cursor: pointer; 
     
} 
 
.active { 
    background-color: #F03226; 
    color: white !important; 
} 
 
#area { 
  border: #F03226 solid 1px; 
  padding: 14px 24px; 
  color: #606060; 
  margin-left: 40px; 
} 
 
#area:active, #area:focus { 
  outline: none; 
} 
 
.dn { 
  display: none 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul id="home" class="characteristic dn"> 
  <li id="kvart">Квартира</li> 
  <li id="house">Дом</li> 
  <li id="kommerc">Коммерческие помещения</li> 
</ul> 
 
<ul id="room" class="characteristic"> 
  <li class="rooms active" data-attr="5">1 комнатная</li> 
  <li class="rooms" data-attr="10">2 комнатная</li> 
  <li class="rooms" data-attr="15">3 комнатная</li> 
</ul> 
 
<input id="area" class="characteristic" type="text" value="1" placeholder="Введите площадь"> 
 
<h2>Результат: </h2> 
<span id="result"></span>