Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Смена background при нажатии (https://javascript.ru/forum/misc/75230-smena-background-pri-nazhatii.html)

JIeuTo 14.09.2018 17:27

Смена 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);

j0hnik 14.09.2018 17:48

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

и для класса activ укажите color и background

JIeuTo 14.09.2018 18:02

j0hnik,
сделал как вы сказали, ничего не происходит

j0hnik 14.09.2018 18:08

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


все остальное связанное со смей цвета уберите

MC-XOBAHCK 14.09.2018 18:10

Вот так попробуйте скрипт исправить, будет откат к стилям прописанным по умолчанию:
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);

JIeuTo 14.09.2018 18:48

MC-XOBAHCK,
благодарю, любезнейший


Часовой пояс GMT +3, время: 07:08.