Изменение цвета фона с помощью оператора else if - JQuery

У меня есть эта программа, которая может динамически перетаскивать <div></div>'s с текстом и цветом фона (красным или синим) по выбору пользователя. Затем пользователь может перетащить div в <td></td> в таблице, и должны отображаться те же текст и цвет фона, что и у перетащенного элемента.

Но сейчас, когда вы перетаскиваете div в <td></td>, цвет фона не меняется (по какой-то причине он придает td синий цвет фона)

Это функция, которую я использую для изменения фона и текста <td></td>:

    $("td").droppable({
  drop: function( event, ui ) { 
    var selectedDiv = event.target;
      $( this )
        .html(text);
          $("div").draggable();

      $( "#"+currentlyDragged ).remove();
  
  if ($(selectedDiv).css('background-color', 'blue')){
     $( this ).css('background-color', 'blue');
  } else if ($(selectedDiv).css('background-color', 'red')){
    $( this ).css('background-color', 'red');
  } 

  }
});

но это не работает, мой синтаксис неверен?

Вот полная версия моего кода:

var text;
var selectedText;
var inputBox = document.getElementById("input");

function showInputBox(){
   inputBox.style.display = "block";
}

function showSchedule(){
  var inputAssignments = document.getElementById("inputAssignments");
  var schedule = document.getElementById("schedule");

  inputAssignments.style.display = "none";
  schedule.style.display = "block";
}

var elementCounter = 0;
function addElement() { 

  var classN = event.target.id;

 text = document.getElementById("input").value;

  // create a new div element and give it a unique id
  var newDiv = document.createElement("div");

  newDiv.id = 'temp'+elementCounter;
  elementCounter++

  if (classN == "blue"){
    newDiv.style.backgroundColor = "blue;"
      } else if (classN == "red"){
    newDiv.style.backgroundColor = "red";
      } 

  // and give it some content
  var newContent = document.createTextNode(text); 
  
  // add the text node to the newly created div
  newDiv.appendChild(newContent);  

  // add the newly created element and its content into the DOM
  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv); 

  $(function() {
    
    var currentlyDragged;
 
    $("div").draggable({
     drag: function (e) {
         currentlyDragged = e.target.id
         selectedText = event.target;
         text = $(selectedText).html();     
    }
    });
  

    $("td").droppable({
      drop: function( event, ui ) { 
        var selectedDiv = event.target;
          $( this )
            .html(text);
              $("div").draggable();

          $( "#"+currentlyDragged ).remove();
      
      if ($(selectedDiv).css('background-color', 'blue')){
         $( this ).css('background-color', 'blue');
      } else if ($(selectedDiv).css('background-color', 'red')){
        $( this ).css('background-color', 'red');
      } 

      }
    });
  });
  document.getElementById("input").value = " ";
}

body{
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

div {
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 100px;
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}


.div3 {
  position: absolute;
  text-align: center;
  border: 1px solid #d3d3d3;
  padding: 10px;
  cursor: move;
  z-index: 10;
  height: 20px ;
  background-color: white;
  width: 20px;
  color: #fff;
}


.div {
  text-align: center;
  padding: 10px;
  cursor: move;
  background-color: #2196F3;
  color: #fff;
}

.divRed {
  text-align: center;
  padding: 10px;
  cursor: move;
  background-color: red;
  color: #fff;
}

td{
  border: 1px solid #d3d3d3;
  padding: 10px;
  height: 20px ;
  width: 200px;
}

div:hover {
  background-color: yellow;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width">
    <title>repl.it</title>
      <script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
    <link href = "style.css" rel = "stylesheet" type = "text/css" />
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel = "stylesheet" href = "/resources/demos/style.css">
  <script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  </head>
  <body>

<header id = "inputAssignments">    
<h1>Input text:</h1>

    <input id = "input" type = "text" value = "text">
    <button id = "blue" onclick = "addElement()" >Make it Blue</button> 
    <button id = "red" onclick = "addElement()" >Make it Red</button> 


    <h1 height = "30px"></h1>

  <button id  = "next" onclick = "showSchedule()">Next</button>

</header>

<header id = "schedule" style = "display:none">

    <p>Drag your outputs to a td:</p>

<table border = "1">
  <tr>
    <td width=100></td>
    <td width=100></td>
    <td width=100></td>
    <td width=100></td>
    <td width=100></td>
  </tr>
</table>


</header>
     <script src = "script.js"></script>
  </body>

</html>

Я полагаю, что 8 вопросов об одном и том же проекте за чуть более 24 часов оставляют очень мало времени для чтения документации...

— 13.12.2020 11:54

javascript html jquery css

13.12.2020 11:40

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 011

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это использование .css

if ($(selectedDiv).css('background-color', 'blue')){

устанавливает свойство, а не запрашивает его. Вот почему вы получаете синие элементы. Вы можете изменить его на

if ($(selectedDiv).css('background-color') == 'blue'){

13.12.2020 11:48

Другие вопросы по теме

Мета-заголовок и имя не заключают в кавычки laravel

Элементы не отображаются в массиве после нажатия

Как сделать таблицу в html, используя rowspan и colspan?

Я не мог понять, в чем ошибка?

Побег меньше и больше, чем в HTML

Flask не может выбрать данные из html-формы

Bootstrap выровняет svg по центру заголовка

Добавление изображения логотипа рядом с текстом в div с использованием html и css

Когда динамически добавленный div удаляется, последний созданный div следует за ним

Какие технологии используются в редакторе Canva

Изменение цвета фона с помощью оператора else if - JQuery

Ответы 1

Другие вопросы по теме

Похожие вопросы