Изменение цвета фона и непрозрачности тела за переключателем - PullRequest
Новая
       39

Изменение цвета фона и непрозрачности тела за переключателем

0 голосов
/ 13 октября 2019

Я вчера опубликовал этот вопрос ( jQuery / JavaScript if для двух переключателей ), где я хотел запретить пользователю открывать два переключателя одновременно. По совету какого-то пользователя я получил результат, который искал со следующим кодом: 

$(document).ready(function() {
  $('.toggle-1').click(function() {
    if ($('.toggle-2').hasClass('active')) {
      // remove toggle-2 active classes
      $('.toggle-2').removeClass('active');
      $('.toggle-2-content').removeClass('active');
    }

    $('.toggle-1').toggleClass('active');
    $('.toggle-1-content').toggleClass('active');
  });

  $('.toggle-2').click(function() {
    if ($('.toggle-1').hasClass('active')) {
      // remove toggle-1 active classes
      $('.toggle-1').removeClass('active');
      $('.toggle-1-content').removeClass('active');
    }

    $('.toggle-2').toggleClass('active');
    $('.toggle-2-content').toggleClass('active');
  });
});

Теперь я пытаюсь запретить пользователю прокручивать фон, установить другой цвет фона и непрозрачность заактивный переключатель, и мне не удается это сделать, добавив следующий фрагмент кода: 

                                    $('body').css({
  overflow: 'hidden',
  background-color: 'black',
  opacity: '0.5'
 });

Способ вставки нового кода в приведенный выше код следующий: 

$(document).ready(function() {
  $('.toggle-1').click(function() {
    if ($('.toggle-2').hasClass('active')) {
      // remove toggle-2 active classes
      $('.toggle-2').removeClass('active');
            $('.toggle-2-content').removeClass('active');
    }

    $('.toggle-1').toggleClass('active');
    $('.toggle-1-content').toggleClass('active');


    $('body').css({
      overflow: 'hidden',
      background-color: 'black',
      opacity: '0.5'
     });
  });



  $('.toggle-2').click(function() {
    if ($('.toggle-1').hasClass('active')) {
      // remove toggle-1 active classes
      $('.toggle-1').removeClass('active');
            $('.toggle-1-content').removeClass('active');
    }

    $('.toggle-2').toggleClass('active');
    $('.toggle-2-content').toggleClass('active');
  });
});

Теперь переключатели даже не работают. Буду очень признателен, если кто-нибудь скажет мне, что я сделал неправильно.

Заранее спасибо за вашу помощь!

1 Ответ

2 голосов
/ 13 октября 2019

Это потому, что тире background-color, для js нельзя ставить тире в переменную. (это будет интерпретироваться как оператор вычитания)

try 

$('body').css({
      overflow: 'hidden',
      'background-color': 'black',
      opacity: '0.5'
});

или 

$('body').css({
      overflow: 'hidden',
      backgroundColor: 'black', // this is valid in jQuery css function
      opacity: '0.5'
});
...