Блог

Главная - Вопросы по программированию - Изменение цвета фона с помощью оператора else if — jQuery

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

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

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

Но прямо сейчас, когда вы перетаскиваете div в a <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>

Комментарии:

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

Ответ №1:

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

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

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

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