Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 21.02.2019, 16:00   #1
triatri3
 
Регистрация: 21.02.2019
Сообщений: 4
По умолчанию Не работает Jquery код

Почему не работает код?
Код:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div></div>
Код:
body {
  padding: 0px;
  margin: 0px;
  background: #CFD8DC;
}
div {
  background: black;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  margin: 20px;
}
Код:
$(function () {
  $('div').click(function(){
    if ($('div').css("background")=="black") {
      $('div').css("background","white");
      $('body').css("background","black");
    }
    else if ($('div').css("background")=="white") {
      $('div').css("background","black");
      $('body').css("background","#CFD8DC");
    }
  })
});
triatri3 вне форума Ответить с цитированием
Старый 21.02.2019, 16:24   #2
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

посмотрите, что возвращает css("backgroung") - http://api.jquery.com/css/
(там демка есть)

а какого эффекта Вы пытаетесь добиться своим кодом?


может быть, сработает то, что Вы добиваетесь так:
Код:
$(function () {
  $('div').click(function(){
    if ($('div').css("background-color")=="rgb(0, 0, 0)") {
      $('div').css("background","white");
      $('body').css("background","black");
    }
    else if ($('div').css("background-color")=="rgb(255, 255, 255)") {
      $('div').css("background","black");
      $('body').css("background","#CFD8DC");
    }
  })
});
но, повторяю, думаю, что Вы не ту задачу и не так решаете.

Последний раз редактировалось Serge_Bliznykov; 21.02.2019 в 16:32.
Serge_Bliznykov вне форума Ответить с цитированием
Старый 21.02.2019, 16:42   #3
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

сравните, например, с таким кодом:
Код HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
body {
  padding: 0px;
  margin: 0px;
  background: #CFD8DC;
}
div {
  background: black;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  margin: 20px;
}
div.inversed{
  background: white;
}
body.inversed{
  background: black;
}
</style>
<script>
$(function () {
  $('div').click(function(){
    $('div').toggleClass('inversed');
    $('body').toggleClass('inversed');
  })
});
</script>
</head>
<body>
<div>homus est lopus best</div>
<div>homus est lopus best</div>
<div>homus est lopus best</div>
</body>
</html>
уверен, что эту задачу вообще на CSS можно решить. только у меня опыта и знаний для этого не хватает
Serge_Bliznykov вне форума Ответить с цитированием
Старый 21.02.2019, 22:06   #4
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от Serge_Bliznykov Посмотреть сообщение
посмотрите, что возвращает css("backgroung") - http://api.jquery.com/css/
Решение через смену класса — самое правильное. Такая логика ведет к смене состояний, а именно тому, на чем основаны современные парадигмы фронтенда: хранение состояния приложения. К этому приклеивается ООП, модульность (компонентный подход), триггеры изменения состояния. Что ведет к MVVC, и дает выход на вью, реакт, ангуляр и прочее то, что сейчас хотят работодатели от фронтендера в крупном проекте.
В мелком проекте состояние можно брать как стержень логики и надстраивать на нем, мощные фреймворки тут уже не нужны: необходимый функционал реализуется вручную. И конечно же, все пишется на нативном JS. jQuery сделал хорошую работу по кроссбраузерности в свое время, но сейчас он просто не нужен. Пора его отпустить с миром

Цитата:
Сообщение от Serge_Bliznykov Посмотреть сообщение
уверен, что эту задачу вообще на CSS можно решить. только у меня опыта и знаний для этого не хватает
Фана ради:
https://jsfiddle.net/naiveMan/yw3auf2o/7/
Понятия не имею, где бы это могло пригодиться
Alar, верни репу!

Последний раз редактировалось Naive; 21.02.2019 в 22:25.
Naive вне форума Ответить с цитированием
Старый 21.02.2019, 22:31   #5
triatri3
 
Регистрация: 21.02.2019
Сообщений: 4
По умолчанию

Цитата:
Сообщение от Serge_Bliznykov Посмотреть сообщение
какого эффекта Вы пытаетесь добиться своим кодом?
Того, что Вы и реализовали. Благодарю. Но всё ещё остались вопросы:
1)либо я идиот, либо Вы просто поменяли значения "black" & "white" на rgb(). Действительно лишь это позволило коду правильно функционировать?
2) Вы сказали почитать что возвращает .css : "Возвращает или изменяет значения css-величин у выбранных элементов страницы."
Разве я делал что-то не так в этом плане?
3) Снизу другой пользователь спросил где это можно использовать, а разве на сайтах где можно менять цветовое оформление реализованно не на этой основе? Например в статьях в вк можно читать чёрные буквы на белом фоне и наоборот.
triatri3 вне форума Ответить с цитированием
Старый 21.02.2019, 23:02   #6
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от triatri3 Посмотреть сообщение
1)либо я идиот, либо Вы просто поменяли значения "black" & "white" на rgb(). Действительно лишь это позволило коду правильно функционировать?
Нет. Еще Серж запрашивает частное свойство background-color вместо общего background. Элемент DOM хранит свойства CSS не в том виде, в котором ты их задаешь, а в том, который максимально удобно для браузера его хранит. Если ты задаешь background: black, то твой черный он переведет в удобоваримый для себя вид, в данном случае — это rgb(0, 0, 0). Но он также запишет и все остальные составные свойства по умолчанию: позиционирование, ресайз, правило повтора etc. Парсить самому такие свойства нет смысла никакого. Имеет смысл только в передаче свойств от одного элемента другому, либо передача в свойства холста (было дело, ага).
Цитата:
Сообщение от triatri3 Посмотреть сообщение
2) Вы сказали почитать что возвращает .css : "Возвращает или изменяет значения css-величин у выбранных элементов страницы."
Разве я делал что-то не так в этом плане?
Да. Думаю, коммент выше объясняет почему.
Цитата:
Сообщение от triatri3 Посмотреть сообщение
3) Снизу другой пользователь спросил где это можно использовать, а разве на сайтах где можно менять цветовое оформление реализованно не на этой основе? Например в статьях в вк можно читать чёрные буквы на белом фоне и наоборот.
Снизу другой пользователь говорил это только про свое CSS решение, не про всю ветку:
- window.getComputedStyle (твое изначальное решение): для данной задачи не верен, так как ты не предугадаешь как какой браузер хранит то или иное свойство.
- toggleClass (решение от Сержа): правильное решение. Так и делают theme.
- мое решение на CSS: баловство, которое кроме как для такой узкой задачи и может подойти. Это как специальная олимпиада по пискомерству. Скилл позволяет решить задачу идиотским способом, который не имеет промышленного применения.
Alar, верни репу!

Последний раз редактировалось Naive; 21.02.2019 в 23:04.
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает JQuery Илья199111 Помощь студентам 16 14.11.2016 20:38
jQuery. JCarouselLite не работает erebos JavaScript, Ajax 3 23.08.2014 15:44
Не работает hide в jquery aleksandr_t94 JavaScript, Ajax 9 02.02.2013 01:13
Не работает выборка в JQuery! pastuhdima JavaScript, Ajax 7 27.09.2012 08:11
Не работает jquery на WordPress alacka WordPress и другие CMS 0 04.02.2012 20:52