Question

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

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

好的是颜色会发生变化。不好的是，当我之后点击其他div并离开它们时，它们会获得与第一个div相同的颜色。如果我什么都不写，或者我写了＃34;是＆＃34;，＆＃34; no＆＃34;或者＆＃34;也许＆＃34;，当我离开时，以下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;
}
});

Answer 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 />

Answer 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;
    }
});

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

2 个答案: