根据当前文本输入在焦点输出上更改单独 div 的背景颜色答案

【问题标题】：Change background color for separate divs on focusout depending on current text input根据当前文本输入在焦点输出上更改单独 div 的背景颜色
【发布时间】：2018-09-09 11:53:16
【问题描述】：

现在已经考虑了好几个小时，但无法提出解决方案。我有大约 5 个具有同一类的 div：<div contenteditable="true" class="change">

当我点击一个 div 时，第一个函数使背景颜色变为白色。当我离开 div 时，我希望根据我在 div 中写入的内容来改变颜色。

好消息是颜色会发生变化。不好的是，当我之后单击其他 div 并离开它们时，它们会收到与第一个 div 相同的颜色。不管我什么都不写，或者我写“是”、“否”或“可能”，当我离开它们时，以下 div 仍然会得到与第一个 div 相同的颜色

帮助！ :(

    $(".change").focus(function() {

    var message = document.querySelector(".change").innerHTML;

        this.style.backgroundColor=("white");

    });



    $((".change") ).focusout(function() {

    var message = document.querySelector(".change").innerHTML;

    console.log(message);

    switch (message) {
      case 'yes':
        this.style.backgroundColor=("green");
        break;
      case 'no':
        this.style.backgroundColor=("red");
        break;
      case 'maybe':
        this.style.backgroundColor=("yellow");
        break;
      default:
        this.style.backgroundColor=("white");
        break;
}
});

【问题讨论】：

一方面，您的代码有语法错误。 focusout 回调和 switch 块都不会关闭。此外，您还有一些不必要（尽管无害）的括号，例如("white").

标签： javascript jquery-selectors this contenteditable

【解决方案1】：

只需将 var message = document.querySelector(".change").innerHTML; 更改为 var message = $(this).text();

$(".change").focus(function() {

var message = document.querySelector(".change").innerHTML;

    this.style.backgroundColor=("white");

});



$((".change") ).focusout(function() {

var message = $(this).text();

switch (message) {
  case 'yes':
    this.style.backgroundColor=("green");
    break;
  case 'no':
    this.style.backgroundColor=("red");
    break;
  case 'maybe':
    this.style.backgroundColor=("yellow");
    break;
  default:
    this.style.backgroundColor=("white");
    break;
    
 }
})

div {
  border: 1px solid black;
}

body {
  background: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div contenteditable="true" class="change"></div>
<br />
<div contenteditable="true" class="change"></div>
<br />
<div contenteditable="true" class="change"></div>
<br />
<div contenteditable="true" class="change"></div>
<br />
<div contenteditable="true" class="change"></div>
<br />

【讨论】：

非常感谢！正是我需要的！

【解决方案2】：

这是因为在您的代码中，您总是引用第一个找到的 document.querySelector(".change").innerHtml 实例

只需将您的代码更改为：

$(".change").focusout(function(event) {

    var message = event.target.value;

    console.log(message);

    switch (message) {
      case 'yes':
        this.style.backgroundColor=("green");
        break;
      case 'no':
        this.style.backgroundColor=("red");
        break;
      case 'maybe':
        this.style.backgroundColor=("yellow");
        break;
      default:
        this.style.backgroundColor=("white");
        break;
    }
});

【讨论】：