堆棧內存溢出
  簡體   English   中英

jQuery檢查img是否在div內

[英]jquery check if img is inside div

 原文  2017-04-07 09:50:28  1   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>

我想要一個在Mario（img）在目標（div）內時彈出的警報框。 謝謝您的幫助。 不介意我的js代碼只是隨機的，我不知道它是否接近正確，謝謝！ 編輯：div是右上角的綠點。

6 個解決方案

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

嘗試$(".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

您的問題有2個案例。

div內部任何級別的圖像，孩子，也都是孩子。 在這種情況下， 

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

如果您只想檢查孩子而不是孩子，可以嘗試 

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

解決方案3
 1 已采納  2017-04-07 10:12:14

我想要一個在Mario（img）在目標（div）內時彈出的警報框。

看來，您不需要檢查元素img是否在div內。 您只需要檢查mario img的坐標是否在目標 div的范圍內即可。

最簡單的方法是使用element.getBoundingClientRect來獲取DOMRect對象，該對象將保留元素的大小和位置。 用它來確定你的馬里奧是否在目標范圍內。

創建一個函數，以在每次鍵盤導航發生時檢查位置。 像這樣： 

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

示例片段：

在此示例中，我一直簡單地簡單計算出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'); } } 
 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

更改選擇器並檢查結果的長度： $(".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

嘗試這個 

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

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

使用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的？ 使用jQuery隱藏div onClick（）內的img標簽 jQuery在div-&gt; a-&gt; img中獲取img標簽的src路徑 檢查字符串是否在div jquery的段落內 jQuery-如果img在單元格內 在div中將模板添加到img jQuery在div中克隆活動的img，並將其作為div的背景圖片 選擇另一個div中的每個div並使用jQuery檢查它的類 JQuery 在 img click 上折疊 div jQuery為每個div添加一個img
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM