使用jQuery通过ID打开HTML元素

Question

I tried to find the answer here but nothing has been working. 我试图在这里找到答案，但是没有任何反应。 Can u guys help me? 你们可以帮我吗？

I have a loop in my logged page what loops "forklifts" from the database. 我的登录页面中有一个循环，该循环从数据库中循环“叉车”。 In every bar, I have hidden modal what I want to show on button click. 在每个栏中，我都隐藏了要在单击按钮时显示的模态。 the modal has an id of a looped forklift (otherwise it opens all modals). 模态的ID为循环叉车的ID（否则它将打开所有模态）。 This code doesn't work and I don't know why. 此代码无效，我也不知道为什么。

js js

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

css 的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 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>

this is only modal, not the whole looped bar. 这只是模态的，不是整个循环的条形。 And I have checked that id goes through js function correctly. 并且我检查了id是否正确通过js函数。

Answer 1

If you want to open only one box then first hide all the boxes by using their classname and then show the box you want to show by id. 如果只想打开一个框，则首先使用它们的类名隐藏所有框，然后按ID显示要显示的框。 Like 喜欢

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

Answer 2

The problem in your code, as you posted a screenshot as a comment on piyush's answer, is that you have several div elements with the same id, in this case 32. 当您在piyush答案的注释中发布屏幕截图作为注释时，代码中的问题是您有多个具有相同id的div元素，在本例中为32。

You need to make sure there's only one instance of the same id on the whole document. 您需要确保整个文档中只有一个具有相同ID的实例。

The code you posted works fine, I created the following dummy page: 您发布的代码工作正常，我创建了以下虚拟页面：

<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