时间戳

首页 > 解决方案 > jQuery - 检查目标是否是特定的 div

javascript - jQuery - 检查目标是否是特定的 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>

我从jQuery check if target is link得到这个，在有人将其标记为重复之前，这些解决方案都不适用于我的具体情况。

我需要找出#previewHolder是否点击了这个代码，并且使用此代码，这两个条件都为真，所以我在控制台中得到了nope和。yes我猜是因为.closebox有多个孩子。我该如何解决这个问题？

这就是整个想法：当用户单击 .closebox 时，我希望隐藏所有 div，除非他单击子元素，但是我希望在子元素为 #previewHolder 时触发一个函数

标签： javascriptjquery

解决方案

click(function(e){
    if($("#previewHolder").is(e.target)){
         console.log("yes");
    }
    else {
         console.log("nop");
    }
});

"#previewHolder"只是一个字符串。

推荐阅读