افتح عنصر html بالمعرف باستخدام jQuery

0

حاولت أن أجد الجواب هنا ولكن لا شيء يعمل. هل يمكنك مساعدتي يا رفاق؟

لدي حلقة في صفحتي المسجَّلة لحلقات "الرافعات الشوكية" من قاعدة البيانات. في كل شريط ، أخفيت مشروطًا ما أريد إظهاره عند النقر على الزر. مشروط يحتوي على معرف رافعة شوكية متعرجة (وإلا فإنه يفتح جميع الوسائط). هذا الرمز لا يعمل ولا أعرف لماذا.

شبيبة 

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

المغلق 

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>

هذا هو مشروط فقط ، وليس شريط حلقات كاملة. وتحققت من أن المعرف يمر من خلال وظيفة شبيبة بشكل صحيح.

2 الاجابة

0

المشكلة في الشفرة الخاصة بك ، حيث قمت بنشر لقطة شاشة كتعليق على إجابة piyush ، هي أن لديك العديد من عناصر div بنفس المعرف ، في هذه الحالة 32.

تحتاج إلى التأكد من وجود مثيل واحد فقط من نفس المعرّف في المستند بالكامل.

يعمل الرمز الذي نشرته بشكل جيد ، لقد أنشأت الصفحة الوهمية التالية: 

<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>
:مؤلف
مشاركة الرابط
0

إذا كنت تريد فتح مربع واحد فقط ، فقم أولاً بإخفاء جميع المربعات باستخدام اسم الفصل الخاص بها ثم قم بإظهار المربع الذي تريد إظهاره بالمعرف. مثل 

function open_broken_modal(id){
    $(".forklift_broken_modal").css("display", "none");
    $("#" + id).css("display", "block");
    //$(".modal_bg").css("display", "block");
}
:مؤلف
مشاركة الرابط

أسئلة ذات صلة

أسئلة شائعة:

علامات السؤال:
فوق
قائمة طعام