Question

＆＃13;

 // w a s d
 
 $(document).ready(function(e){
  var keys = {};

  $(document).keydown(function(event){
    keys[event.which] = true;
  }).keyup(function(event){
    delete keys[event.which];
  });

  var $d = $("img");

  function gameLoop() {
    if (keys[68]) {     
        $d.css("left", function(i,oldVal) { return parseInt(oldVal) + 5 + "px"; });
    }
    else if (keys[65]) { 
        $d.css("left", function(i,oldVal) { return parseInt(oldVal) - 5 + "px"; });
    }
    if (keys[83]) {     
        $d.css("top", function(i,oldVal) { return parseInt(oldVal) + 5 + "px"; });
    }
    else if (keys[87]) {
        $d.css("top", function(i,oldVal) { return parseInt(oldVal) - 5 + "px"; });
    }
   
    setTimeout(gameLoop, 20);
  }
  gameLoop();
    
  $(document).focus();
});

// arrows
 $(document).ready(function(e){
  var keys = {};

  $(document).keydown(function(event){
    keys[event.which] = true;
  }).keyup(function(event){
    delete keys[event.which];
  });

  var $d = $("img");

  function gameLoop() {
    if (keys[37]) {     
        $d.css("left", function(i,oldVal) { return parseInt(oldVal) - 5 + "px"; });
    }
    else if (keys[39]) { 
        $d.css("left", function(i,oldVal) { return parseInt(oldVal) + 5 + "px"; });
    }
    if (keys[40]) {     
        $d.css("top", function(i,oldVal) { return parseInt(oldVal) + 5 + "px"; });
    }
    else if (keys[38]) {
        $d.css("top", function(i,oldVal) { return parseInt(oldVal) - 5 + "px"; });
    }
   
    setTimeout(gameLoop, 20);
  }
  gameLoop();
    
  $(document).focus();
});


  $(document).ready(function(){
    if($(".goal:has(img)")){
        alert("yes");
    }
    });

＆＃13;

img {
position : absolute;
left: 0;
    top: 0;
}
.goal{
    width: 10px;
    height: 10px;
    background-color: green;
    float: right;
    }

＆＃13;

<!DOCTYPE html>
<html>
    <head>
    	<title>Super Mario!</title>
        <link rel='stylesheet' type='text/css' href='style.css'/>
		
	</head>
	<body>
	
        <img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg"/>
        <div class="goal"></div>
        
        
	</body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
    <script src="script.js"></script>

	
</html>

＆＃13;

我想要一个警告框，当Mario（img）在目标（div）内时弹出。谢谢您的帮助。不要介意我的js代码，它只是随机的东西，我不知道它是否接近正确，谢谢！编辑：div是右上角的绿点。

Answer 1

尝试使用$(".goal").find("img").length > 0

$(document).ready(function() {
  if ($(".goal").find("img").length > 0) {
    alert("yes");
  } else { alert( "no" ); }
});

img {
  position: absolute;
  left: 0;
  top: 0;
}

.goal {
  width: 10px;
  height: 10px;
  background-color: green;
  float: right;
}

<!DOCTYPE html>
<html>

<head>
  <title>Super Mario!</title>
  <link rel='stylesheet' type='text/css' href='style.css' />

</head>

<body>

  <img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg" />
  <div class="goal"></div>


</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="script.js"></script>


</html>

Answer 2

您的问题有2个案例。

任何级别的div里面的图像，儿童和它的孩子也是如此。在那种情况下，

if ($(".goal").find('img').length) {
        // yes
    }

如果您只想检查孩子，而不是孩子，请尝试

if($(.goal).find('> img').length) {
   // yes
}

Answer 3

我想要一个警告框，当马里奥（img）在里面时弹出目标（DIV）。

看来，您不需要检查元素div是否在img内。您要做的只是检查马里奥 div的坐标是否在目标 DOMRect的范围内。

最简单的方法是使用element.getBoundingClientRect来获取保存元素大小和位置的function checkMario() { var goalPost = $('.goal')[0].getBoundingClientRect(); var mario = $('#mario')[0].getBoundingClientRect(); if ((goalPost.left - mario.left) < 60) { $('#result').text('yesssss'); } else { $('#result').text('no yet'); } }对象。使用此选项可确定 mario 是否在目标的范围内。

创建一个函数，以便在每次键盘导航发生时检查位置。像这样：

left

示例代码段

在这个例子中，我简单地计算div位置是否在$(document).ready(function(e) { var keys = {}; $(document).keydown(function(event) { keys[event.which] = true; }).keyup(function(event) { delete keys[event.which]; }); var $d = $("img"); function gameLoop() { if (keys[68]) { $d.css("left", function(i, oldVal) { return parseInt(oldVal) + 5 + "px"; }); } else if (keys[65]) { $d.css("left", function(i, oldVal) { return parseInt(oldVal) - 5 + "px"; }); } if (keys[83]) { $d.css("top", function(i, oldVal) { return parseInt(oldVal) + 5 + "px"; }); } else if (keys[87]) { $d.css("top", function(i, oldVal) { return parseInt(oldVal) - 5 + "px"; }); } setTimeout(gameLoop, 20); } gameLoop(); $(document).focus(); }); // arrows $(document).ready(function(e) { var keys = {}; $(document).keydown(function(event) { keys[event.which] = true; }).keyup(function(event) { delete keys[event.which]; }); var $d = $("img"); function gameLoop() { if (keys[37]) { $d.css("left", function(i, oldVal) { return parseInt(oldVal) - 5 + "px"; }); checkMario(); } else if (keys[39]) { $d.css("left", function(i, oldVal) { return parseInt(oldVal) + 5 + "px"; }); checkMario(); } if (keys[40]) { $d.css("top", function(i, oldVal) { return parseInt(oldVal) + 5 + "px"; }); checkMario(); } else if (keys[38]) { $d.css("top", function(i, oldVal) { return parseInt(oldVal) - 5 + "px"; }); checkMario(); } setTimeout(gameLoop, 20); } gameLoop(); $(document).focus(); }); function checkMario() { var goalPost = $('.goal')[0].getBoundingClientRect(); var mario = $('#mario')[0].getBoundingClientRect(); if ((goalPost.left - mario.left) < 60) { $('#result').text('yesssss'); } else { $('#result').text('no yet'); } }的范围内。然后，您需要进一步完善它以检查所有方面。

尝试使用键盘左/右键将 mario 移动到目标。

＆＃13;

img {
  position: absolute;
  left: 0; top: 0; width: 60px;
}
.goal {
  width: 10px; height: 10px;
  background-color: green; float: right;
}
p { margin-top: 64px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id='mario'  src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg" />
<div class="goal"></div>
<br/>
<p id="result"></p>

＆＃13;

php artisan migrate

＆＃13;

Answer 4

更改选择器并检查结果的长度：$(".goal img").length

$(document).ready(function() {
  if ($(".goal img").length) {
    alert("yes");
  }
});

img {
  position: absolute;
  left: 0;
  top: 0;
}

.goal {
  width: 10px;
  height: 10px;
  background-color: green;
  float: right;
}

<!DOCTYPE html>
<html>

<head>
  <title>Super Mario!</title>
  <link rel='stylesheet' type='text/css' href='style.css' />

</head>

<body>

  <img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg" />
  <div class="goal">
      <img>
  </div>


</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="script.js"></script>


</html>

Answer 5

试试这个

$(document).ready(function(){
    if($("img").closest('.goal').length){
        alert("yes");
    }
});

Answer 6

使用length检查图片代码find。

＆＃13;

$(document).ready(function(){
if ($('.goal').find('img').length >0 )  
  alert("yes");
else
  alert("no");  
    });

＆＃13;

img {
position : absolute;
left: 0;
    top: 0;
}
.goal{
    width: 10px;
    height: 10px;
    background-color: green;
    float: right;
    }

＆＃13;

<!DOCTYPE html>
<html>
    <head>
    	<title>Super Mario!</title>
        <link rel='stylesheet' type='text/css' href='style.css'/>
		
	</head>
	<body>
	
        <img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg"/>
        <div class="goal"></div>
        
        
	</body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
    <script src="script.js"></script>

	
</html>

＆＃13;

jquery检查img是否在div中

6 个答案: