1

Подскажите пожалуйста, что может быть не так?Логика такая при нажатии на одну из иконок(".icon") беру ее value и потом пытаюсь изменить цвет body, но он не меняется. Не могу понять в чем проблема, спасибо.

$('.icon').click(function() {
  let key = $(this).attr("value");
  switch (key) {
    case 1:
      $('body,html').css({
        'background': '#373948'
      });
      break;
    case 2:
      $('body,html').css({
        'background': '#d9635f'
      });
      break;
    default:
      $('body,html').css({
        'background': '#e18377;'
      });
      break;
  }
});
ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}

.info {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
  padding-top: 80px;
}

.icon {
  width: 140px;
  height: 140px;
}

.icon:hover {
  cursor: pointer;
}

.description {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

.title_content {
  font-size: 20px;
  font-weight: bold;
}

.description a {
  font-size: 12px;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="info">
  <ul class="icons">
    <ul class="description">
      <li><img src="media/folder_image.png" alt="folder" class="icon" value="1"></li>
    </ul>
  </ul>
  <ul class="icons">
    <ul class="description">
      <li><img src="media/pencil_image.png" alt="pencil" class="icon" value="2"></li>
    </ul>
  </ul>
</div>

4
  • Вы в консоли смотрели что у вас происходит на 2-у строчке? Я подозреваю - что вы своему классу.icon присваиваете атрибут value 18 окт 2018 в 15:02
  • @ПавелИгоревич Cмотрел, выводится val который задан в html, то есть в зависимости от того на что нажал в key будет 1 или 2
    – Tick-Tack
    18 окт 2018 в 15:03
  • А так же в jQuery пишешься так .css(“bgc”, ”color”); 18 окт 2018 в 15:06
  • @ПавелИгоревич, в jQuery всегда есть несколько способов сделать что-то :-)
    – Grundy
    18 окт 2018 в 15:07

1 ответ 1

1

В коде присутствует две проблемы:

  1. значение key - строка, а значения в switch - число, поэтому всегда выбирается ветка default

  2. Опечатка в ветке default: '#e18377;' лишняя ;.

Если исправить, то все заработает:

$('.icon').click(function() {
  let key = $(this).attr("value");
  switch (key) {
    case '1':
      $('body,html').css({
        'background': '#373948'
      });
      break;
    case '2':
      $('body,html').css({
        'background': '#d9635f'
      });
      break;
    default:
      $('body,html').css({
        'background': '#e18377'
      });
      break;
  }
});
ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}

.info {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
  padding-top: 80px;
}

.icon {
  width: 140px;
  height: 140px;
}

.icon:hover {
  cursor: pointer;
}

.description {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

.title_content {
  font-size: 20px;
  font-weight: bold;
}

.description a {
  font-size: 12px;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="info">
  <ul class="icons">
    <ul class="description">
      <li><img src="media/folder_image.png" alt="folder" class="icon" value="1"></li>
    </ul>
  </ul>
  <ul class="icons">
    <ul class="description">
      <li><img src="media/pencil_image.png" alt="pencil" class="icon" value="2"></li>
    </ul>
  </ul>
  <ul class="icons">
    <ul class="description">
      <li><img src="media/pencil_image.png" alt="third" class="icon" value="3"></li>
    </ul>
  </ul>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.