最近双击的元素上的 .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数据库点击selected class从div（实际上... div.selcted）中删除添加selected class到div您 dbclicked 中。input[type=text]改变设置input[type=text].value_div.selcted.innerHTML当你使用 jQuery 事件时，有两种方法可以获得$this让我向您展示如何解决这个问题。常规功能 $('#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再见