最近双击的元素上的 .last.removeClass()

Question

我有这个程序，允许用户在双击 div 时编辑它。我试图只让最近双击的 div 有边框。我现在正在使用 addClass 方法执行此操作，我使用此函数添加 .selceted 类：$(function () { $("div").dblclick(function (e) {     clickedTD = event.target;     $(clickedTD).find(clickedTD).last.removeClass("selected").addClass("selected");  }我试图用这个删除最后一个选定的 div，.find(clickedTD).last.removeClass("selected") 以便最近双击的 div 是唯一具有 .selected 类的 div。但这不起作用，我不确定为什么。这是我的完整代码：var text;var selectedText;var blue = document.getElementById("blue");var blue2 = document.getElementById("blue2");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;  newDiv.classList = "div";  elementCounter++  if (classN == "blue"){    newDiv.classList = "blue"      } else if (classN == "red"){        newDiv.classList = "red"      } else if (classN == "green"){        newDiv.classList = "green"      } else if (classN == "blue2"){        newDiv.classList = "blue2"      }  // 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();         }    });$(function () {    $("div").dblclick(function (e) {        clickedTD = event.target;        $(clickedTD).find(clickedTD).last.removeClass("selected").addClass("selected");     }    );});  });  document.getElementById("input").value = " ";}

Answer 1

你想要的是...

div数据库点击

1. selected class从div（实际上... div.selcted）中删除

2. 添加selected class到div您 dbclicked 中。

input[type=text]改变

1. 设置input[type=text].value_div.selcted.innerHTML

当你使用 jQuery 事件时，

有两种方法可以获得$this

让我向您展示如何解决这个问题。

1. 常规功能

 $('#elementId').on('click', function(){

     //1. Remove selected class from div

     $('div.selected').removeClass('selected');

     //2. Add selected class to $this

     const $this = $(this);

     $this.addClass('selected')

 });

箭头功能

 $('#elementId').on('click', (_event) => {

     //1. Remove selected class from div

     $('div.selected').removeClass('selected');

     //2. Add selected class to $this

     const $this = $(_event.currentTarget); // important!

     $this.addClass('selected')

 });

最后，输入的Change事件[type=text]

这次我将跳过箭头功能。

$('#someInput').on('change', function(){

    const value = $(this).val();

    $('div.selcted').html(value);

});

完毕！

我建议您为 HTML DOM 设置 id 或 class。

如果将事件设置为 ['div', 'input' ...]，则会产生副作用

不使用div，输入

使用#element001（最佳）或div.myElement001

再见