Question

我试图在单击一个按钮时将一个类添加到div，根据哪个div最后有焦点。

我可以获得div的id，但不能点击按钮

<div contenteditable="true" id="duck">one</div>
<div contenteditable="true" id="dog">two</div>
<div contenteditable="true" id="cat">three</div>
<input type="label" id="showValue"></input>

<button id="clickMe">Click me</button>

和js

var divbox = document.getElementsByTagName('div');

for (var i = 0; i < divbox.length; i++)
  divbox[i].addEventListener('focus', function() {
    $('#showValue')[0].value = this.id;    
  }, false);


$('#clickMe').click(function() {
 alert(divbox)
});

小提琴http://jsfiddle.net/ktcle/sf9vrj9L/

Answer 1

所以，如果我正确地理解你的问题，解决它的一种方法就是这样（同时删除vanilla和jQuery的混合，只使用jQuery）

＆＃13;

$("div").focusin(function() {
   $(".focused").removeClass("focused");
   $(this).addClass("focused");
});


$('#clickMe').click(function() {
 $(".newClass").removeClass("newClass");
 $(".focused").addClass("newClass");
});

＆＃13;

div {
  border: 1px solid red;
  padding: 1em;
  margin: 1em
}

.newClass {background: pink}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" id="duck">one</div>
<div contenteditable="true" id="dog">two</div>
<div contenteditable="true" id="cat">three</div>


<button id="clickMe">
Click me
</button>

＆＃13;

我们的想法是使用focusin事件来附加标记类，以便您知道哪个div是最后一个具有焦点的div。例如，你不能依赖:focus伪类，因为只要你点击按钮，div就会失去焦点。然后，当您单击该按钮时，您只需找到包含focused类的div并将newClass添加到其中。

Answer 2

仍然无法理解你的目的，但根据你的代码，你可以让它像这样工作

$(function(){

	$("div").hover(function(){
  	$("#showValue").val($(this).attr('id'));
  })

})

$('#clickMe').click(function() {
 $("#"+$("#showValue").val()).addClass('newClass')
});

div {
  border: 1px solid red;
  padding: 1em;
  margin: 1em
}

.newClass {background: pink}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

根据光标所在的位置将div添加到div

2 个答案: