jQuery - 检查目标是否是特定的 div
[英]jQuery - check if target is specific div
问题描述
$(document).ready(function (){ $(".closebox").click(function(){ $('#uploadbox').hide(); $('#lightbox').hide(); $('#deniedbox').hide(); $('#confirm_delete_box').hide(); }).children().click(function(e) { console.log(e.target.id); // I get "previewHolder" and "filePhoto" in the console if($(e.target).is('#previewHolder')){ console.log('yes'); return false; }else{ console.log('nope'); return false; } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="uploadbox"> <tr> <td align="center" valign="middle" style="height: 100%;" class="closebox"> <div style="background-color: white; border-radius: 8px; padding-top: 12px; display: inline-block; -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1); -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1); box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);"> <div style="margin: 20px; margin-top: 25px; margin-bottom: 25px; line-height: 6px; max-height: 800px; overflow: auto;" id="upbox"> <input type="file" name="filePhoto" value="" id="filePhoto" accept=".jpg,.jpeg,.png,.gif" data-errormsg="Something went wrong" style="display: none;"> <div id="upload_title_afterview" style="font-size: 22px; padding-bottom: 20px; padding-top: 6px; color: #404040; text-align: left; max-width: 500px; line-height: 26px; display: none;"></div> <img src="<?php echo $domain; ?>/style/upload_background.jpg" id="previewHolder" style="max-width: 498px; max-height: 100%; margin-bottom: 10px; border: solid 1px #C0C0C0; cursor: pointer;" onclick="choose_image();"/> <br> <div id="upload_error" style="width: 100%; text-align: left; color: #FF6600; font-size: 18px; margin-top: 15px; margin-bottom: 15px; display: none;"> </div> </div> </div> </td> <tr> </table>
I got this from jQuery check if target is link , before somebody mark this as duplicate, none of those solutions are working in my specific case.
我从jQuery check if target is link得到这个，在有人将其标记为重复之前，这些解决方案都不适用于我的特定情况。
I need to find out wheather #previewHolder was clicked and with this code both conditions are true, so I get nope and yes in the console.我需要找出是否点击了#previewHolder并且使用此代码，两个条件都为真，所以我在控制台中得到nope和yes 。 I guess because .closebox has multiple children.我猜是因为.closebox有多个孩子。 How can I solve this?我该如何解决这个问题？
This is the whole idea: When the user clicks on .closebox then I want all the divs to be hidden except he clicks on a child element, but then I want a function to be triggered when the child element is #previewHolder这就是整个想法：当用户单击 .closebox 时，除了单击子元素外，我希望隐藏所有 div，但是当子元素为 #previewHolder 时，我希望触发一个函数
3 个解决方案
解决方案1
0 2019-12-06 05:50:45
click(function(e){
if($("#previewHolder").is(e.target)){
console.log("yes");
}
else {
console.log("nop");
}
});
The "#previewHolder" is only a string. "#previewHolder"只是一个字符串。
解决方案2
0 2019-12-06 06:39:17
If you want it so that .closebox doesn't close when clicking #previewHolder you simply need to do the following:如果您想要它以便.closebox在单击#previewHolder时不会关闭，您只需执行以下操作：
$('#previewHolder').click(function(e) {
e.stopPropagation();
//add any code you want here
});
The code e.stopPropagation();代码e.stopPropagation(); stops the .closebox event from triggering停止触发.closebox事件
解决方案3
0 2019-12-06 07:48:28
Please go thorough the below code and see if this is what you want.请仔细阅读以下代码，看看这是否是您想要的。 Click on each child element and see the behavior.单击每个子元素并查看行为。
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(".childbox").click(function(){ if($(this).attr("id")=="previewHolder"){ previewHolderClick() } else{ $(".childbox").hide(); $(this).show(); } }); function previewHolderClick(){ alert("previewHolder clicked"); } }); </script> </head> <body> <div class="closebox" style="width:200px; height:200px; background:yellow"> <div class="childbox">Child 1</div><br> <div class="childbox">Child 2</div><br> <div class="childbox" id="previewHolder">previewHolder<div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.