Форум

SLameN · #1 (**permalink**) 13.07.2015, 16:26

Как добавить class к <a> в блоке pagination, когда пользователь ничего не выбрал в input в одном из блоков question-1 или 2 или 3 и т.д.?

Имеется следующее

<div class='test-data'>
    <div class='question' data-id='1' id='question-1'>
        <p class='q'>Вопрос 1</p>
        
        <p class='a'><input type='radio' id='answer-1' name='question-1' value='1'>
        <label for='answer-1'>Ответ 1</label></p>
        
        <p class='a'><input type='radio' id='answer-2' name='question-1' value='2'>
        <label for='answer-2'>Ответ 2</label></p>
        
        <p class='a'><input type='radio' id='answer-3' name='question-1' value='3'>
        <label for='answer-3'>Ответ 3</label></p>
    </div>
    
    <div class='question' data-id='2' id='question-2'>
        <p class='q'>Вопрос 2</p>
        
        <p class='a'><input type='radio' id='answer-4' name='question-2' value='4'>
        <label for='answer-4'>Ответ 1</label></p>
        
        <p class='a'><input type='radio' id='answer-5' name='question-2' value='5'>
        <label for='answer-5'>Ответ 2</label></p>
    </div>
</div>

<div class="pagination">
    <a class="nav-active" href="#question-1">1</a>
    <a href="#question-2">2</a>
    <a href="#question-5">3</a>
</div>

<button class='center btn' id='btn'>Результаты</button>

рони · #2 (**permalink**) 13.07.2015, 16:41

SLameN,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .red{
    background-color: Red;
  }

  </style>
</head>

<body>
 <div class='test-data'>
    <div class='question' data-id='1' id='question-1'>
        <p class='q'>Вопрос 1</p>

        <p class='a'><input type='radio' id='answer-1' name='question-1' value='1'>
        <label for='answer-1'>Ответ 1</label></p>

        <p class='a'><input type='radio' id='answer-2' name='question-1' value='2'>
        <label for='answer-2'>Ответ 2</label></p>

        <p class='a'><input type='radio' id='answer-3' name='question-1' value='3'>
        <label for='answer-3'>Ответ 3</label></p>
    </div>

    <div class='question' data-id='2' id='question-2'>
        <p class='q'>Вопрос 2</p>

        <p class='a'><input type='radio' id='answer-4' name='question-2' value='4'>
        <label for='answer-4'>Ответ 1</label></p>

        <p class='a'><input type='radio' id='answer-5' name='question-2' value='5' >
        <label for='answer-5'>Ответ 2</label></p>
    </div>
</div>

<div class="pagination">
    <a class="nav-active" href="#question-1">1</a>
    <a href="#question-2">2</a>
    <a href="#question-5">3</a>
</div>

<button class='center btn' id='btn'>Результаты</button>
<script>
  btn.onclick = function() {
   var a = document.querySelectorAll('.pagination a');
   for (var i=0; i<a.length; i++)  {
     var sel = a[i].getAttribute('href') + ' input:checked';
     if(document.querySelector(sel)) a[i].classList.remove('red');
     else a[i].classList.add('red');
   }
}
</script>
</body>

</html>

ksa · #3 (**permalink**) 13.07.2015, 16:54

Сообщение от SLameN

Как добавить class к <a> в блоке pagination, когда пользователь ничего не выбрал в input в одном из блоков question-1 или 2 или 3 и т.д.?

Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
.no {
	color: red;
}
</style>
<script type='text/javascript'>
$(function(){
	$('button').click(function(){
		$('.pagination a').removeClass('no');
		$('.pagination a').each(function(){
			var name=$(this).attr('href').split('#')[1];
			var o=$('[name="'+name+'"]:checked');
			if (o.length==0) {
				$(this).addClass('no');
			};
		});
	});
});
</script>
</head>
<body>
<div class='test-data'>
    <div class='question' data-id='1' id='question-1'>
        <p class='q'>Вопрос 1</p>
        <p class='a'><input type='radio' id='answer-1' name='question-1' value='1'>
        <label for='answer-1'>Ответ 1</label></p>
        <p class='a'><input type='radio' id='answer-2' name='question-1' value='2'>
        <label for='answer-2'>Ответ 2</label></p>
        <p class='a'><input type='radio' id='answer-3' name='question-1' value='3'>
        <label for='answer-3'>Ответ 3</label></p>
    </div>
    <div class='question' data-id='2' id='question-2'>
        <p class='q'>Вопрос 2</p>
        <p class='a'><input type='radio' id='answer-4' name='question-2' value='4'>
        <label for='answer-4'>Ответ 1</label></p>
        <p class='a'><input type='radio' id='answer-5' name='question-2' value='5'>
        <label for='answer-5'>Ответ 2</label></p>
    </div>
</div>
<div class="pagination">
    <a class="nav-active" href="#question-1">1</a>
    <a href="#question-2">2</a>
    <a href="#question-5">3</a>
</div>
<button class='center btn' id='btn'>Результаты</button>
</body>
</html>

SLameN · #4 (**permalink**) 13.07.2015, 16:55

Спасибо большое!

А можно ли вызывать функцию при нажатии на любой input?

btn.onclick

Цель: У пользователя например 40 вопросов (40 пагинаций), он может пропустить вопрос и не нажать input и при нажатии на другой будет срабатывать эта функция (чтобы можно было увидеть вопрос, где не выбран Input)

рони · #5 (**permalink**) 13.07.2015, 17:56

SLameN,
поставьте на 'test-data'
document.querySelector('.test-data').onclick

ksa · #6 (**permalink**) 14.07.2015, 08:31

Сообщение от SLameN

А можно ли вызывать функцию при нажатии на любой input?

Функцию можно вызывать при любом событии...

Форум

Справочник

Discord чат

Курсы javascript