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

#javascript #jquery

Решил заменить чекбоксы с помощью списка 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/

  

      
1 комнатная
      
2 комнатная
      
3 комнатная
    



    
Результат: 
    


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

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

    

Ответы

Ответ 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
}


  
Квартира
  
Дом
  
Коммерческие помещения



  
1 комнатная
  
2 комнатная
  
3 комнатная




Результат: