Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.09.2018, 17:27
Интересующийся
Отправить личное сообщение для JIeuTo Посмотреть профиль Найти все сообщения от JIeuTo
 
Регистрация: 14.09.2018
Сообщений: 18

Смена background при нажатии
Есть скрипт небольшой, при нажатии на вопрос, выплывает ответ, я хочу что бы при нажатии на вопрос, менялся фон вопроса, я это реализовал, но при нажатии на этот же вопрос, фон обратно не убирается, подскажите где поправить?
<div class="row">
					<div class="col-lg-12">
						<div class="question">
							<span>Как заказать анонимно?</span>
							<div class="bg-plus">
								<div class="plus"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="answer">
					Основная проблема, с которой сталкиваются пользователи, торгующие криптовалютами, заключалась в том, что у них было приложение для доступа ко всем из одного места. Основная проблема, с которой сталкиваются пользователи, торгующие криптовалютами, заключалась в том, что у них было приложение для доступа ко всем из одного места. Основная проблема, с которой сталкиваются пользователи, торгующие криптовалютами, заключалась 
					в том, что у них было приложение для доступа ко всем из одного места. Основная проблема, с которой сталкиваются пользователи, торгующие криптовалютами, заключалась в том, что у них было приложение для доступа ко всем из одного места. Основная проблема, с которой Основная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которой
				</div>

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
window.addEventListener('load', function () {
    allClass(0.4); // время transition
    function allClass(transition) {
        var question = [].slice.call(document.querySelectorAll('.question'),0)
            answer = [].slice.call(document.querySelectorAll('.answer'),0)
            arrayHeight = [];
        var props = function props(el) {
            return el.getBoundingClientRect();
        };
        [].concat(_toConsumableArray(question)).forEach(function (e, i) {
            arrayHeight[i] = props(answer[i]).bottom - props(answer[i]).top + 10 + 'px';
            answer[i].style.height = '0px';
            setTimeout(function () {
                return answer[i].style.transition = transition + 's';
            }, 50);
            e.addEventListener('click', function () {
                [].concat(_toConsumableArray(answer)).forEach(function (e, i) {
                    answer[i].style.height = '0px';
                    question[i].style.backgroundColor = '#fff';
                    question[i].style.color = '#000';
                });
                props(answer[i]).height == 0 ? answer[i].style.height = arrayHeight[i] : '';
                question[i].style.backgroundColor = '#9e39a1';
                question[i].style.color = '#fff';
            });
        });
    }
}, false);
Ответить с цитированием
  #2 (permalink)  
Старый 14.09.2018, 17:48
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,624

JIeuTo,
лучше сделайте так!
question[i].classList.toggle('activ');

и для класса activ укажите color и background
Ответить с цитированием
  #3 (permalink)  
Старый 14.09.2018, 18:02
Интересующийся
Отправить личное сообщение для JIeuTo Посмотреть профиль Найти все сообщения от JIeuTo
 
Регистрация: 14.09.2018
Сообщений: 18

j0hnik,
сделал как вы сказали, ничего не происходит
Ответить с цитированием
  #4 (permalink)  
Старый 14.09.2018, 18:08
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,624

<style>
		.activ{
			color: white;
			background-color: red;
		}
	</style>
	<span>Как заказать анонимно?</span>
	<script>
document.querySelector('span').onclick = function(){
	this.classList.toggle('activ');
};
	</script>


все остальное связанное со смей цвета уберите
Ответить с цитированием
  #5 (permalink)  
Старый 14.09.2018, 18:10
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 397

Вот так попробуйте скрипт исправить, будет откат к стилям прописанным по умолчанию:
function _toConsumableArray(arr) {
    if (Array.isArray(arr)) {
        for (var i = 0, arr2 = Array(arr.length);
            i < arr.length; i++) { arr2[i] = arr[i];
        } return arr2;
    }
    else { return Array.from(arr); } }
    
window.addEventListener('load', function () {
    allClass(0.4); // время transition
    function allClass(transition) {
        var question = [].slice.call(document.querySelectorAll('.question'), 0)
        answer = [].slice.call(document.querySelectorAll('.answer'), 0)
        arrayHeight = [];
        var props = function props(el) {
            return el.getBoundingClientRect();
        };
        [].concat(_toConsumableArray(question)).forEach(function (e, i) {
            arrayHeight[i] = props(answer[i]).bottom - props(answer[i]).top + 10 + 'px';
            answer[i].style.height = '0px';
            setTimeout(function () {
                return answer[i].style.transition = transition + 's';
            }, 50);
            e.addEventListener('click', function () {
                [].concat(_toConsumableArray(answer)).forEach(function (e, i) {
                    answer[i].style.height = '0px';
                    question[i].style.backgroundColor = '#fff';
                    question[i].style.color = '#000';
                });
                if (props(answer[i]).height == 0) {
                    answer[i].style.height = arrayHeight[i];
                    question[i].style.backgroundColor = '#9e39a1';
                    question[i].style.color = '#fff';
                }
                else {
                    question[i].style.backgroundColor = '';
                    question[i].style.color = '';
                };
            });
        });
    }
}, false);
Ответить с цитированием
  #6 (permalink)  
Старый 14.09.2018, 18:48
Интересующийся
Отправить личное сообщение для JIeuTo Посмотреть профиль Найти все сообщения от JIeuTo
 
Регистрация: 14.09.2018
Сообщений: 18

MC-XOBAHCK,
благодарю, любезнейший
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавная смена картинок при нажатии на ссылки rodion7195 Общие вопросы Javascript 9 28.11.2017 22:39
Активация checkbox при нажатии на текст и изменение стиля у текста. ilyakor jQuery 2 10.06.2014 18:34
Скрыть div при нажатии на картинку SLameN jQuery 6 14.04.2014 20:27
Смена картинки при нажатии на радиокнопку (нужен совет) Roningrad Элементы интерфейса 2 04.04.2013 20:12
Ajax смена картинки при нажатии на неё maxim123 AJAX и COMET 1 23.02.2011 13:57