使用jQuery通过ID打开HTML元素

Question

我试图在这里找到答案，但是没有任何反应。 你们可以帮我吗？

我的登录页面中有一个循环，该循环从数据库中循环“叉车”。 在每个栏中，我都隐藏了要在单击按钮时显示的模态。 模态的ID为循环叉车的ID（否则它将打开所有模态）。 此代码无效，我也不知道为什么。

js

function open_broken_modal(id){
    $("#" + id).css("display", "block");
    //$(".modal_bg").css("display", "block");
}

的CSS

z-index:250;
position:fixed;
top:75px;
left:calc(50% - 300px);
width:600px;
height:500px;
background-color:white;
border:2px solid red;
border-radius:2px;
display:none;

PHP和HTML

<div id="<?php print $forklift_id; ?>" class="forklift_broken_modal">
                            <div id="modal_info_wrapper" class="modal_info_wrapper">
                                <h1 class="forklift_number_h" id="forklift_number_b"><?php print $forklift_id; ?></h1>
                                <h2 class="forklift_name_h" id="forklift_name_b"></h2>
                                <div class="forklift_info_box">
                                    <p class="forklift_info_p" id="forklift_info_b"></p>
                                </div>  
                                <h2 class="forklift_name_h">charging spot</h2>
                                <p class="forklift_info_p" id="forklift_chargin_b"></p>
                            </div>
                            <form action="">
                                <div class="modal_input_wrapper">
                                    <input title="this information will be sent to management" class="radio_btn" type="radio" name="broken" value="broken">broken
                                    <input class="broken_info" type="text" name="broken_info" placeholder="write short information how its broken here."><br>
                                    <input class="radio_btn" type="radio" name="broken" value="not_broken">intact<br>
                                </div>
                                <div class="modal_footer">
                                    <input title="this information will be sent to management" class="input_submit" value="save" name="save_broken_details" type="submit">
                                    <button onclick="close_all_modals();" class="input_submit">exit</button>
                                </div>
                            </form>
                        </div>

这只是模态的，不是整个循环的条形。 并且我检查了id是否正确通过js函数。

Answer 1

如果只想打开一个框，则首先使用它们的类名隐藏所有框，然后按ID显示要显示的框。 喜欢

function open_broken_modal(id){
    $(".forklift_broken_modal").css("display", "none");
    $("#" + id).css("display", "block");
    //$(".modal_bg").css("display", "block");
}

Answer 2

当您在piyush答案的注释中发布屏幕截图作为注释时，代码中的问题是您有多个具有相同id的div元素，在本例中为32。

您需要确保整个文档中只有一个具有相同ID的实例。

您发布的代码工作正常，我创建了以下虚拟页面：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<style>
.forklift_broken_modal{
        z-index:250;
        position:fixed;
        top:75px;
        left:calc(50% - 300px);
        width:600px;
        height:500px;
        background-color:white;
        border:2px solid red;
        border-radius:2px;
        display:none;
}
</style>
<?php $forklift_id = 123; ?>
<i title="mark forklift broken" onclick="open_broken_modal(<?php print $forklift_id ?>);" class="fa fa-wrench water_logo" aria-hidden="true">click me</i>
<div id="<?php print $forklift_id; ?>" class="forklift_broken_modal">
    <div id="modal_info_wrapper" class="modal_info_wrapper">
        <h1 class="forklift_number_h" id="forklift_number_b"><?php print $forklift_id; ?></h1>
        <h2 class="forklift_name_h" id="forklift_name_b"></h2>
        <div class="forklift_info_box">
            <p class="forklift_info_p" id="forklift_info_b"></p>
        </div>  
        <h2 class="forklift_name_h">charging spot</h2>
        <p class="forklift_info_p" id="forklift_chargin_b"></p>
    </div>
    <form action="">
        <div class="modal_input_wrapper">
            <input title="this information will be sent to management" class="radio_btn" type="radio" name="broken" value="broken">broken
            <input class="broken_info" type="text" name="broken_info" placeholder="write short information how its broken here."><br>
            <input class="radio_btn" type="radio" name="broken" value="not_broken">intact<br>
        </div>
        <div class="modal_footer">
            <input title="this information will be sent to management" class="input_submit" value="save" name="save_broken_details" type="submit">
            <button onclick="close_all_modals();" class="input_submit">exit</button>
        </div>
    </form>
</div>
<script type="text/javascript">
function open_broken_modal(id){
    console.log('clicking!');
    $("#" + id).css("display", "block");
    //$(".modal_bg").css("display", "block");
}
</script>
</body>
</html>

使用jQuery通过ID打开HTML元素

问题描述

2 个解决方案

解决方案1
0 2018-07-26 10:24:01

解决方案2
0 已采纳 2018-07-26 10:55:37

使用jQuery通过ID打开HTML元素

问题描述

2 个解决方案

解决方案1 0 2018-07-26 10:24:01

解决方案2 0 已采纳 2018-07-26 10:55:37

解决方案1
0 2018-07-26 10:24:01

解决方案2
0 已采纳 2018-07-26 10:55:37