堆栈内存溢出
  简体   繁体   English

jQuery检查img是否在div内

[英]jquery check if img is inside div

 原文  2017-04-07 09:50:28  4   6    javascript/ jquery/ html/ css

问题描述

  // wasd $(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"); } }); 
 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>

I want an alert box that pops up when the Mario(img) is inside the goal(div). 我想要一个在Mario（img）在目标（div）内时弹出的警报框。 Thanks for the help. 谢谢您的帮助。 don't mind my js code it's just something random and I don't know if it's close to right, Thanks! 不介意我的js代码只是随机的，我不知道它是否接近正确，谢谢！ Edit: the div is the green dot on the top right corner. 编辑：div是右上角的绿点。

6 个解决方案

解决方案1
 3  2017-04-07 09:52:29

Try with $(".goal").find("img").length > 0 尝试$(".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>

解决方案2
 1  2017-04-07 09:56:29

Your question have 2 cases. 您的问题有2个案例。

Image inside of div at any level, children and it's children too. div内部任何级别的图像，孩子，也都是孩子。 In that case, 在这种情况下， 

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

If you want to check only children and not children of children you can try 如果您只想检查孩子而不是孩子，可以尝试 

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

解决方案3
 1 已采纳  2017-04-07 10:12:14

I want an alert box that pops up when the Mario(img) is inside the goal(div). 我想要一个在Mario（img）在目标（div）内时弹出的警报框。

It seems, that you don't need to check if the element img is inside the div or not. 看来，您不需要检查元素img是否在div内。 What you want to do is just check if the coordinates of your mario img are within the range of the goal div . 您只需要检查mario img的坐标是否在目标 div的范围内即可。

Easiest would be to use element.getBoundingClientRect , to obtain the DOMRect object which will hold the size and position of your elements. 最简单的方法是使用element.getBoundingClientRect来获取DOMRect对象，该对象将保留元素的大小和位置。 Use this to figure out if your mario is in the range of your goal . 用它来确定你的马里奥是否在目标范围内。

Create a function to check the position every time keyboard navigation happens. 创建一个函数，以在每次键盘导航发生时检查位置。 Like this: 像这样： 

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');
    }
}

Example Snippet: 示例片段：

In this example, I have kept it simple to simply calculate if the left position is within the range of the div . 在此示例中，我一直简单地简单计算出left位置是否在div的范围内。 You will then need to refine it further to check for all sides. 然后，您将需要进一步优化以检查所有方面。

Try using your keyboard left/right keys to move the mario in to the goal . 尝试使用键盘的向左/向右键将马里奥琴移至目标 。 

 $(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'); } } 
 img { position: absolute; left: 0; top: 0; width: 60px; } .goal { width: 10px; height: 10px; background-color: green; float: right; } p { margin-top: 64px; } 
 <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>

解决方案4
 0  2017-04-07 09:53:10

Change your selector and check the length of the result: $(".goal img").length 更改选择器并检查结果的长度： $(".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>

解决方案5
 0  2017-04-07 09:53:34

try this 尝试这个 

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

解决方案6
 0  2017-04-07 09:54:51

Check for image tag length using find . 使用find检查图像标签的length 。 

 $(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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何检查div中的最后一个孩子是否 <img> 与jQuery的？ - How to check if last child in a div is <img> with jquery? 使用jQuery隐藏div onClick（）内的img标签 - Hiding img tag inside div onClick() using jQuery jQuery在div-&gt; a-&gt; img中获取img标签的src路径 - Jquery take src path of img tag inside div-->a-->img 检查字符串是否在div jquery的段落内 - Check if a string is inside paragraphs of a div jquery jQuery-如果img在单元格内 - jQuery - if an img is inside a cell 在div中将模板添加到img - Prepending template to img inside div jQuery在div中克隆活动的img，并将其作为div的背景图片 - jQuery clone the active img inside a div and make it the div's background image 选择另一个div中的每个div并使用jQuery检查它的类 - Select every div inside another div and check it's class with jQuery JQuery 在 img click 上折叠 div - JQuery collapse div on img click jQuery为每个div添加一个img - jQuery append an img to every div
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM