Question

一般来说，我对jquery和javascript还是很陌生，我正在尝试使用td元素上的$.contains(container,contained)方法使图像在表中单击时出现和消失，但似乎没有正常工作。这是示例代码。

var td = document.getElementById('1');

td.addEventListener('click', function() {

  var img = document.createElement('img');
  img.src = 'https://via.placeholder.com/350x150'; //sample image

  if ($.contains(td, img)) {
    td.removeChild(img);
  } else {
    td.appendChild(img);
  }

}, false);

td {
  height: 100px;
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="2">
  <tr>
    <td id="1">
    </td>
  </tr>
</table>

编辑：代码中充满了错误和/或试验。现在我清理了。

Answer 1

您必须删除：

td.appendChild(img);

img声明后的

。

您的代码创建后，添加附件总是会删除图像。

实际上，if ($.contains(td, img)){...}始终返回true。

Answer 2

您应该尝试：

contains()

或者如果您想要父元素的直接后代：

if($('#1').find('img').length) { 
    // condition
}

这是一个不使用id选择器的版本，而是检查被单击元素的直接后代是否包含图像：

if ($('#1').find('> img').length) {
    // condition
}

Answer 3

这是您代码的jQuery实现。您想要实现的实际目标是什么？如果添加新的图像对象，则测试永远不会正确

也许您想知道单元格中是否有图像？

var $td = $('#cell_1');

$td.on('click', function() {

  var $img = $("<img/>", {
    src: 'https://via.placeholder.com/350x150?text='+new Date().getTime()
  }); //sample image

  var $images = $td.find("img");
  if ($images.length>0) { 
    $images.remove(); 
  } else {
    $td.append($img);
  }

});

td {
  height: 100px;
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="2">
  <tr>
    <td id="cell_1"></td>
  </tr>
</table>

普通JS：

var td = document.getElementById('cell_1');

td.addEventListener('click', function() {

  var img = document.createElement("img");
  img.src= 'https://via.placeholder.com/99x99?text='+new Date().getTime(); 

  var images = td.querySelectorAll("img");
  if (images.length>0) { 
    td.innerHTML=""; // or loop over child elements
  } else {
    td.appendChild(img);
  }

},false);

td {
  height: 100px;
  width: 100px;
  padding:0;
  
}

<table border="2">
  <tr>
    <td id="cell_1"></td>
  </tr>
</table>

Answer 4

检查一个元素是否是另一个元素的后代。

$.contains( document.documentElement, document.body ); // true
$.contains( document.body, document.documentElement ); // false

我们还可以使用.contains选择包含以下内容的元素：

<html>
<head>
<script>
$(document).ready(function(){
    $("p:contains(is)").css("background-color", "yellow");
});
</script>

</head>
<body>

<h1>Welcome to My Homepage</h1>

<p class="intro">My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
Who is Batman?
</body>
</html>

这将选择以下标签：

 <p class="intro">My name is Donald.</p>
 <p>My best friend is Mickey.</p>

$ .contains（）方法的jQuery使用情况

4 个答案: