使用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