距此最近的jQuery失败，为什么？

时间：2019-06-27 21:47:35

标签： jquery this closest this-pointer

jQuery不是我的强项。从逻辑上来说这似乎是正确的，尽管它不起作用。我已经搜索了从查找到最接近的所有内容，等等。我不知道为什么它不起作用。

我想做的是单击tr this时，将类添加到最近的<span>。

我没有错误，但也没有结果。

代码：

$curTable .= "
    <tr bgcolor='#f2e2f2' onmouseover=style.backgroundColor='#FFFFFF'; onmouseout=style.backgroundColor='#f2e2f2';>
        <td>$typeSelect</td>
        <td>$cfilename</td>
        <td><input type='text' size='20' name='cexpDate' class='dp exp' value='$cexpDate' /><script type='text/javascript'>$('.dp').datetimepicker({format:'m/d/Y'});</script></td>
        <td>$catSelect</td>
        <td>$cdateAdded</td>
        <td>$caddedBy</td>
        <td><span class='mod' onclick=\"deleteFile('{$cid}','{$cfilename2}');\">delete</span> | <span class='mod' onclick='modFile($cid)'>modify</span></td>
    </tr>";

jQuery：

function deleteFile(fileId,fileName){
    var fileId = fileId;
    var fileName = fileName;
    var test = this;
    //alert(test);
    $(this).closest('tr').addClass("highlight");
    $('#submit').prop('disabled', true);
    $('#rmDeleteOverlay').fadeIn();
    $('#deleteFile').append("<br><br><center>"+fileName+"</center>");
}

CSS：

.highlight{
    background-color:#000;
}

感谢您的帮助。

function deleteFile(fileId,fileName){
	var fileId = fileId;
	var fileName = fileName;
	var test = this;
	//alert(test);
	$(this).closest('tr').addClass("highlight");
	$('#submit').prop('disabled', true);
	$('#rmDeleteOverlay').fadeIn();
	$('#deleteFile').append("<br><br><center>"+fileName+"</center>");
}
.highlight{
	background-color:#000;
	
}
.mod{
	cursor:pointer;
	color:#a45127;
}
.mod:hover{
	cursor:pointer;
	text-decoration: underline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr bgcolor='#f2e2f2' onmouseover=style.backgroundColor='#FFFFFF'; onmouseout=style.backgroundColor='#f2e2f2';>
			<td><select name='type'><option value='spec'>SPEC</option><option selected value='clg'>CLG</option><option value='coa'>COA</option><option value='gmo'>GMO</option><option value='allergen'>ALLERGEN</option><option value='audit'>AUDIT</option><option value='cor'>COR</option><option value='organic'>ORGANIC</option><option value='kosher'>KOSHER</option><option value='oth'>OTHER</option></select></td>
			<td><a href='/uploads/rm/46/46_clg_20190620223443.pdf' target='_blank'>46_clg_20190620223443.pdf</a></td>
			
			<td><select name='cat'><option selected value='cur'>Current</option><option value='oth'>Other</option><option value='arc'>Archive</option></select></td>
			<td>2019-06-20 22:34:43</td>
			<td><a href='editUser.php?id=11'>11</a></td>
			<td><span class='mod' onclick="deleteFile('1','<a href=\'/uploads/rm/46/46_clg_20190620223443.pdf\' target=\'_blank\'>46_clg_20190620223443.pdf</a>');">delete</span> | <span class='mod' onclick='modFile(1)'>modify</span></td>
		</tr>

4 个答案:

答案 0 :(得分：1)

调用onclick="deleteFile('{$cid}','{$cfilename2}');之类的函数时，不会将this设置为该函数中的元素。您需要显式传递元素，例如onclick="deleteFile(this,'{$cid}','{$cfilename2}');。

您也没有看到highlight类的样式更改，因为style="background-color: #f2e2f2"具有优先权。我将其移至CSS中，并使.highlight的样式更加具体。另外，在CSS中使用:hover而不是onmouseover。

function deleteFile(element, fileId, fileName) {
  $(element).closest('tr').addClass("highlight");
  $('#submit').prop('disabled', true);
  $('#rmDeleteOverlay').fadeIn();
  $('#deleteFile').append("<br><br><center>" + fileName + "</center>");
}
tr {
  background-color: #f2e2f2;
}

tr:hover {
  background-color: #FFFFFF;
}

tr.highlight {
  background-color: #000;
}

.mod {
  cursor: pointer;
  color: #a45127;
}

.mod:hover {
  cursor: pointer;
  text-decoration: underline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select name='type'>
        <option value='spec'>SPEC</option>
        <option selected value='clg'>CLG</option>
        <option value='coa'>COA</option>
        <option value='gmo'>GMO</option>
        <option value='allergen'>ALLERGEN</option>
        <option value='audit'>AUDIT</option>
        <option value='cor'>COR</option>
        <option value='organic'>ORGANIC</option>
        <option value='kosher'>KOSHER</option>
        <option value='oth'>OTHER</option>
      </select>
    </td>
    <td><a href='/uploads/rm/46/46_clg_20190620223443.pdf' target='_blank'>46_clg_20190620223443.pdf</a></td>

    <td>
      <select name='cat'>
        <option selected value='cur'>Current</option>
        <option value='oth'>Other</option>
        <option value='arc'>Archive</option>
      </select>
    </td>
    <td>2019-06-20 22:34:43</td>
    <td><a href='editUser.php?id=11'>11</a></td>
    <td><span class='mod' onclick="deleteFile(this, '1','<a href=\'/uploads/rm/46/46_clg_20190620223443.pdf\' target=\'_blank\'>46_clg_20190620223443.pdf</a>');">delete</span> | <span class='mod' onclick='modFile(1)'>modify</span></td>
  </tr>
</table>

也不需要

var fileId = fileId;

函数参数已经是局部变量，您无需重新声明它们。

答案 1 :(得分：1)

为演示@Barmar已经说明的内容，下面是代码证明：

function foo(context) {
  context.closest('div').style.backgroundColor = 'yellow';
}
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus omnis et dolorem nobis?
  <button onclick="foo()">click me</button> Harum, aspernatur molestias at asperiores veniam sit pariatur aut animi, dignissimos consequatur quam quo earum dolor quod?</div>

<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus omnis et dolorem nobis?
  <button onclick="foo(this)">click me, this time passing context</button> Harum, aspernatur molestias at asperiores veniam sit pariatur aut animi, dignissimos consequatur quam quo earum dolor quod?</div>

如果您想使用this，则需要使用addEventListener（无论如何，内联事件监听器确实很糟糕：

function foo() {
  this.closest('div').style.backgroundColor = 'yellow';
}

baz.addEventListener('click', foo);
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus omnis et dolorem nobis?
  <button id="baz">click me</button> Harum, aspernatur molestias at asperiores veniam sit pariatur aut animi, dignissimos consequatur quam quo earum dolor quod?</div>

答案 2 :(得分：1)

不确定这是否是问题所在，但在JSFiddle（以及其他地方，您可能必须将tr用表标签括起来。这对我来说似乎是个问题。

<!DOCTYPE html>
<html>
<table>
<tr id = "rowelement">
  <td><select name='type'>
  <option value='spec'>SPEC</option>
  <option selected value='clg'>CLG</option>
  <option value='coa'>COA</option>
  <option value='gmo'>GMO</option>
  <option value='allergen'>ALLERGEN</option>
  <option value='audit'>AUDIT</option>
  <option value='cor'>COR</option>
  <option value='organic'>ORGANIC</option>
  <option value='kosher'>KOSHER</option>
  <option value='oth'>OTHER</option>
  </select>
  </td>
    <td><a href='/uploads/rm/46/46_clg_20190620223443.pdf' target='_blank'>46_clg_20190620223443.pdf</a></td>

<td>
<select name='cat'>
<option selected value='cur'>Current</option>
<option value='oth'>Other</option>
<option value='arc'>Archive</option>
</select>
</td>

<td>2019-06-20 22:34:43</td>
<td><a href='editUser.php?id=11'>11</a></td>
<td><span id ="delete" class='mod' data-file = "1" data-filepath = "/uploads/rm/46/46_clg_20190620223443.pdf">delete</span> | <span id ="mod" class='mod' onclick='modFile($cid)'>modify</span>
</td>
</tr>
</table>
</html>

不确定JS是否适合您，但是如果您可以将函数的参数放入数据属性中，那将是一种方法。

$("#rowelement").on("mouseover", function(e) {
    $(this).css("background", "#FFFFFF");
});
$("#rowelement").on("mouseout", function(e) {
    $(this).css("background", "#f2e2f2");
});

$("#delete").on("click", function(e) {
e.preventDefault();
    var fileId = $(this).data("file");
    var fileName = $(this).data("filepath");
    $(this).closest('tr').addClass("highlight");
    // ??? $('#submit').prop('disabled', true);
    // ??? $('#rmDeleteOverlay').fadeIn();
    // ???$('#deleteFile').append("<br><br><center>"+fileName+"</center>");
});

CSS 

.highlight{
    background-color: #000 !important;
}
.mod{
    cursor: pointer;
    color: #a45127;
}
.mod:hover{
    cursor: pointer;
    text-decoration: underline;
}
#rowelement {
  background: #f2e2f2;
}

答案 3 :(得分：0)

感谢大家提供所有信息！尤其是@Barmar和@sscotti

事实证明，问题出在3折上。

  1. 将元素信息传递给函数并使用this。当在click事件onClick="deleteFile()"后面调用函数时，我试图让该函数引用clicked元素，并且无知地假定该元素信息已自动传递。 @Barmar指出我需要在函数调用中包括this作为参数。

  2. 我最初在<tr>中为onMouse*事件使用的语法不正确。我正在使用onMouseOver=style.backgroundColor='#FFFFFF';，这破坏了<tr>标记。我应该在jsFiddle中注意到这一点，但是我没有注意到。谢谢@sscotti指出这一点。该行应该为onMouseOver="style.backgroundColor='#FFFFFF';"，并且与onMouseOut类似。

  3. 基于@Barmar的进一步研究提到内联样式覆盖CSS，这使我了解CSS特异性。特定性是带有点系统的基本浏览器规则。胜利者将是得分最高的人。内联样式= 1000，id = 100，class = 10，element = 1。

使用onMouse*事件更改样式等于1000点。我试图通过发行价值10分的addClass()来改变函数中的相同样式。内联样式声明胜过该调用，因此该类被忽略。

通过从onMouse*中删除内联<tr>样式声明并将其移至css类，它将它们从价值1000点降为价值10。由于它们现在的价值与{ {1}}使用了另一个基本浏览器规则。当分数匹配时，最后获胜。

感谢所有贡献并帮助我找到答案的人。是的，我知道我的某些脚本是过时且基本的。完美是人类的忌讳，IMO并不存在。我靠形式前的功能生活，但是我喜欢改善自己的习惯。

希望这对某人有帮助。

相关问题
最新问题