如何点击按钮时根据最后获焦的div为其添加class

我来帮你搞定这个需求！你已经通过focus事件把最后聚焦的div的id存到输入框里了，现在只需要在点击按钮的时候，利用这个存储的id找到对应的div，给它加上class就可以啦～

先修正一个小细节 #

你HTML里的<input type="label">是无效的，type属性没有label这个取值，应该改成type="text"，不然可能没办法正常存储id值哦！

修改后的完整代码示例 #

HTML部分

<div contenteditable="true" id="duck">one</div>
<div contenteditable="true" id="dog">two</div>
<div contenteditable="true" id="cat">three</div>
<input type="text" id="showValue">
<button id="clickMe">Click me</button>

CSS部分（可选，让class效果可视化）

.highlight {
  background-color: #fff3cd;
  border: 1px solid #ffc107;
}

JavaScript部分

// 给所有可编辑div绑定focus事件，记录最后聚焦的id
var divbox = document.getElementsByTagName('div');
for (var i = 0; i < divbox.length; i++) {
  divbox[i].addEventListener('focus', function() {
    $('#showValue')[0].value = this.id;
  }, false);
}

// 点击按钮时，给最后聚焦的div添加class
$('#clickMe').click(function() {
  // 取出存储的最后聚焦的div id
  const targetId = $('#showValue').val();
  if (targetId) {
    // 可选：先移除所有div的highlight类，避免多个div保留样式
    $('div[contenteditable]').removeClass('highlight');
    // 给目标div添加指定class
    $('#' + targetId).addClass('highlight');
  }
});

逻辑说明 #

1. 当你点击任意可编辑div时，它的id会被存入showValue输入框，这部分你的原代码已经实现得很到位；
2. 点击按钮时，我们从输入框里取出这个id，通过$('#' + targetId)定位到对应的div元素；
3. 调用addClass('highlight')给它添加样式类，如果不需要清除其他div的样式，可以去掉移除class的那行代码。

内容的提问来源于stack exchange，提问作者user3665791