मैं क्या करना चाहता हूं अजाक्स एक पृष्ठ से शीर्ष पांच अकॉर्डियन तत्व हैं। मुझे मौजूदा सामग्री को अजाक्स के माध्यम से लोड करने के बाद अकॉर्डियन प्रारूप में रखने में परेशानी हो रही है। क्या .load() का उपयोग करके शीर्ष पांच को खींचना संभव होगा? मुझे इस समस्या के बारे में कैसे जाना चाहिए?

पेज से मैं अजाक्स करना चाहूंगा:

<div id="main" class="accordians">
    <h3>Collapsible Group Item #1</h3>
    <div>
        <p>This is section 1. Place your content here in paragraphs or use div elements etc.</p>
    </div>
    <h3>Collapsible Group Item #2</h3>
    <div>
        <p>This is section 2. Place your content here in paragraphs or use div elements etc.</p>
    </div>
    <h3>Collapsible Group Item #3</h3>
    <div>
        <p>This is section 3. Place your content here in paragraphs or use div elements etc.</p>
    </div>
    <h3>Collapsible Group Item #4</h3>
    <div>
        <p>This is section 4. Place your content here in paragraphs or use div elements etc.</p>
    </div>
    <h3>Collapsible Group Item #5</h3>
    <div>
        <p>This is section 5. Place your content here in paragraphs or use div elements etc.</p>
    </div>
    <h3>Collapsible Group Item #6</h3>
    <div>
        <p>This is section 6. Place your content here in paragraphs or use div elements etc.</p>
    </div>
</div>

Accordion Looks like the following

दूसरा पृष्ठ अजाक्स के माध्यम से अकॉर्डियन को खींचेगा:

<div id="load-top-five">#load top five accordions into here.</div>
<script>
   // would like to combine the functionality to only return the top five.
   $('#load-top-five').load('https://www.example.com #main'); // this loads the page but doesn't keep it in the correct format.
   $('#load-top-five').find('#main:lt(5)').each(function(){...} // I would like to do some logic like this to only render the top 5.
<script>
0
Andrew 2 जुलाई 2020, 00:53

2 जवाब

सबसे बढ़िया उत्तर

सबसे पहले, आपको तत्व को पृष्ठ पर लोड करना होगा। डेटा लोड होने के बाद ही अकॉर्डियन प्रारूपित होगा।

$(function() {
    $('#load-into-new-accordion').load('https://www.someurl.com #accordion_data');
});

// create a function for the accordion.
function loadAccordionFormating() {
  $('#load-into-new-accordion').accordion({});
}

// after the data is done loading apply the formatting.
window.onload = function() {
   loadAccordionFormating();
};

तत्वों को छिपाने के लिए आप ui-id-1, ui-id-2, आदि का उपयोग कर सकते हैं, जिसे आप लूप के लिए सरल बनाते हैं।

for(var i=1;i<15; i++) {
    $(`ui-id-${i}`).hide();
}

इसके अतिरिक्त, चूंकि यह धीमा है, इसलिए आप डिफ़ॉल्ट रूप से सीएसएस के साथ तत्वों को छुपा सकते हैं और उन्हें ऊपर की तरह ही विधि के साथ दिखा सकते हैं।

0
Andrew 22 जुलाई 2020, 00:09

आप इसे इस तरह से कर सकते हैं

फ़ाइल html . में

<div id="main" class="accordians">
    <div class="card-acordeon">
        <div id="collapse1"> 
            <h3 class="title">header 1</h3>
        </div>
        <div class="acordeon" id="acordeon1">
            <p>This is section 1. Place your content here in paragraphs or use div elements etc.</p>
        </div>
    </div>
    <div class="card-acordeon">
        <div id="collapse2"> 
            <h3 class="title">header 2</h3>
        </div>
        <div class="acordeon" id="acordeon2">
            <p>This is section 2. Place your content here in paragraphs or use div elements etc.</p>
        </div>
    </div>
    <div class="card-acordeon">
        <div id="collapse3"> 
            <h3 class="title">header 3</h3>
        </div>
        <div class="acordeon" id="acordeon3">
            <p>This is section 3. Place your content here in paragraphs or use div elements etc.</p>
        </div>
    </div>
    <div class="card-acordeon">
        <div id="collapse4"> 
            <h3 class="title">header 4</h3>
        </div>
        <div class="acordeon" id="acordeon4">
            <p>This is section 4. Place your content here in paragraphs or use div elements etc.</p>
        </div>
    </div>
    <div class="card-acordeon">
        <div id="collapse5"> 
            <h3 class="title">header 5</h3>
        </div>
        <div class="acordeon" id="acordeon5">
            <p>This is section 5. Place your content here in paragraphs or use div elements etc.</p>
        </div>
    </div>
    <div class="card-acordeon">
        <div id="collapse6"> 
            <h3 class="title">header 6</h3>
        </div>
        <div class="acordeon" id="acordeon6">
            <p>This is section 6. Place your content here in paragraphs or use div elements etc.</p>
        </div>
    </div>
    <div class="card-acordeon">
        <div id="collapse7"> 
            <h3 class="title">header 7</h3>
        </div>
        <div class="acordeon" id="acordeon7">
            <p>This is section 7. Place your content here in paragraphs or use div elements etc.</p>
        </div>
    </div>
    <div class="card-acordeon">
        <div id="collapse8"> 
            <h3 class="title">header 8</h3>
        </div>
        <div class="acordeon" id="acordeon8">
            <p>This is section 8. Place your content here in paragraphs or use div elements etc.</p>
        </div>
    </div>
</div>

फ़ाइल css . में

*{
            padding: 0;
            margin: 0;
        }

        .accordians{
            height: auto;
            width: 80%;
            padding-top: 4%;
            margin: auto;
        }

        .card-acordeon{
            width: 100%;
            height: auto;
            cursor: pointer;
            padding-left: 2%;
            padding-top: 1%;
            padding-bottom: 1%;
            border-bottom: 1px solid rgb(121, 121, 121);
            background-color: gray;
        }

        .card-acordeon div:nth-child(2){
            display: none;
        }

        .card-acordeon:hover{
            opacity: 0.9;
        }

        .title{
            color: white;
            font-size: 20px;
            font-weight: bolder;
            height: 100%;
            width: 100%;
        }
        .acordeon{
            margin-top: 2%;
            padding-left: 1%;
            padding-right: 1%;
        }

फ़ाइल में js

$(document).ready(function () {
        console.log("hay "+$(".card-acordeon").length+" div con la clase card-acordeon");
        for(var i=0; i<$(".card-acordeon").length; i++){
            let pos=i+1;
            if(i<5){
                $("#acordeon"+pos).css('display','block');
            }
            $("#collapse"+pos).click(Collapsediv);
        }
    });

    var idbefor=0;
    var id=0;

    function Collapsediv(){
        id=this.id.substring(this.id.length-1,this.id.length);
        $("#acordeon"+id).css('display','block');
        if(idbefor!=id){
            $("#acordeon"+idbefor).css('display','none');
        }
        else{
            $("#acordeon"+id).css('display','block');
        }
        idbefor=this.id.substring(this.id.length-1,this.id.length);
    }
1
Jairo Rodriguez 2 जुलाई 2020, 06:32