عرض جافا سكريبت وإخفاء عنصر div

Question

أنا جديد على Javascript، ولدي حاليًا مقالة يتم جلبها من قاعدة البيانات، وتتكون المقالة من صفين. عنوان & محتوى هناك حوالي 100 من هذه في قاعدة البيانات الخاصة بي.الهدف الآن هو إدراج جميع العناوين أولاً، وعندما ينقر المستخدم على عنوان ما، يظهر المحتوى ذي الصلة أسفله.يمكنني أن أفعل هذا ولكن بهذه الطريقة.

<?php
//mysql query here...
foreach($result as $row) { ?>
<div id='title'> <?= $row['title'] ?> </div>
<div id='<?= $row['id'] ?>' style='display:none' 
             onclick=showContent(<?= $row['id'] ?>) > <?= $row['content'] ?> 
</div>
<?php } ?>

جافا سكريبت لإخفاء محتوى العرض هو هذا:

<script type='text/javascript'>
function showContent(id){
    document.getElementById(id).style.display='inline';
}
</script>

ال showContent() تقوم الدالة بإخفاء القسم بناءً على المعرف الذي تم تمريره عبر المعلمة.لكن المشكلة الوحيدة هي أنني بحاجة إلى تقسيم عناصر div الأخرى المعروضة مسبقًا عند فتح قسم جديد.

بمعنى أنه يجب أن يكون المحتوى مرئيًا مرة واحدة فقط، ثم عند الضغط على عنوان آخر، يجب أن يختفي المحتوى الذي تم فتحه مسبقًا ويظهر المحتوى الجديد فقط.

آمل أن يكون هذا منطقيا.لأنني أفتقر إلى القواعد لشرح كل شيء.حاولت أن أعطي مثالًا صغيرًا هنا، والذي لسبب ما لا يبدو أنه يعمل على الإطلاق، ولكنه يعمل في المضيف المحلي الخاص بي http://jsfiddle.net/YL6aH/

---

تم التعديل:

حلقة PHP الكاملة الخاصة بي، ستجمع معًا جميع ملفات js/html

    <?php 
            $articlesForPreview = $createQuery
                ->query("SELECT * FROM timeline");              
                $fetchAll = $articlesForPreview->fetchAll(PDO::FETCH_ASSOC);    
                foreach($fetchAll as $row) {?>
                <div id='timeline_container'>
                <span class='timeline_date'> <?= $row['time'] ?></span>
                <span class='timeline_title'> <a href='#' onclick=timeline(<?= $row['id'] ?>)><?= $row['title'] ?></a></span>
                <p id='<?= $row['id'] ?>' style='display:none;'> <?= $row['event'] ?></a></span>
            </div>

            <?php }?>



    </aside>
</section>

<script type='text/javascript'>
function timeline(id){
    document.getElementById(id).style.display='inline';
}
</script>

<footer id='footer_container'> 

Answer 1

يمكنك ببساطة تذكر العنصر الأخير المرئي:

var active;
function showContent(id){
    if (active) active.style.display = 'none'; // hide previously visible element
    active = document.getElementById(id);    // keep track of the element you are about to show
    active.style.display='inline'; // show the new element
}

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

Answer 2

يجب أن تجرب هذا:

function showContent(id){
    $('.active').hide().removeClass('active');
    $('#'+id).show().addClass('active');
}

أرى أيضًا أنه سيكون لديك عناصر متعددة id=title, ، أنت يجب قم بتغييره لجعل كل عنصر فريدًا.

Answer 3

يمكنك تصفح جميع العناصر بنقرة واحدة على "showContent"، وإخفائها جميعًا، وبعد ذلك يمكنك فقط إظهار العنصر الذي تريده.

function showContent(id){
    var allElements = document.getElementsByTagName('*');
    for ( var i = 0; i<allElements.length; i++ ) {    
        if ( (allElements[i].onclick + "").indexOf("showContent") >= 0) {
            allElements[i].style.display = "none";       
        }
    }
    document.getElementById(id).style.display='inline';
}

Answer 4

أنا شخصيًا جديد جدًا في التعامل مع جافا سكريبت وjquery، ولكن أحد الأشياء التي قمنا بها للتو في الفصل الذي كنت أدرسه هو عرض الأكورديون، حيث تقوم بإرفاق معالجات الأحداث في المستند. جاهز لأحداث النقر لكائنات الرأس، وعناصر div الفرعية الخاصة بهم، ويتم ذلك عن طريق تبديل فئات CSS في أحداث النقر...هل تستخدم المغلق؟في نسختنا، في أي وقت ننقر فيه على علامة الجمع، سيتم توسيع الشاشة لعرض الأقسام أدناه، والنقر على الصورة السالبة سيؤدي إلى إغلاقها...لقد فعلنا ذلك من أجلهم جميعًا، ولكن يجب أن تكون قادرًا على ترميز ذلك حتى "لإغلاق" كل تلك العروض، ثم فتح/عرض فقط divs التي هي فرعية للعنصر الذي تم النقر عليه...هل هذا ما تبحث عنه؟