使用 AJAX、JQuery 和 HTML 顯示/隱藏數據

Question

作為“評論”部分的一部分，我有一個按鈕可以閱讀所有評論，目前頁面上只有少數評論。 我希望按鈕使用 AJAX 和 JQuery 顯示來自 a.json 文件的數據。

HTML..

    <section class="prod-review">
        <section class="review">
            <img src="images/review.jpg" alt="icon-1"/>
            <h4><span class="rating">*****</span><br/><span class="review-header">Great!!!</span></h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </section>
            <hr/>
        <button id='button'><a href="#" class="show">SHOW REVIEWS</a></button>
        <button id='button'><a href="#" class="hide">HIDE REVIEWS</a></button>
    </section>

JavaScript...

    $(document).on('ready', function() {
    
        $('#button').on('click', function() {

            $.ajax('reviews.json', {
                type: 'GET',
                dataType: 'json',
                success: function(url) {
                    for(var i = 0; i < url.length; i++) {
                        $('.prod-review').append('<dd>' + url[i].id, url[i].product_id, url[i].nickname, url[i].review, url[i].rating + '</dd>');
                
                    }
                }
            });

            $('a.show').on('click', function(event) {
                event.preventDefault();
                var link = $(this);
                var list_item = link;
                var reviews = list_item.find('reviews.json');
                reviews.show();
                $(this).show();
                $(this).hide();
            });

            $('a.hide').on('click', function(e) {
                e.preventDefault();
                $(this).find('reviews.json').hide();
                $(this).show();
                $(this).hide();
            });

        });
    
    });

JSON 數據..

[{"id":"1","product_id":"b-o","nickname":"Joe","review":"Great :3","rating":"5"}]

使用此代碼，當單擊按鈕時，數據將附加到按鈕下的頁面，盡管全部顯示為一個字符串，如下所示..

第499章：35

我對 JS 比較陌生，對 AJAX 和 JQuery 完全陌生，我想了解它是如何工作的。

基本上我需要 JSON 文件中的數據在單擊時出現在按鈕下，然后在再次單擊按鈕時隱藏。 最好也將數據拆分，因此它不會全部出現在一行上。 我花了幾天時間嘗試不同的東西，這是我得到的最接近的。

任何幫助將非常感激。

編輯。 我使用一些簡單的代碼拆分對象。 現在，當我單擊按鈕時，它會顯示我希望它在屏幕上顯示的方式，但它不會隱藏它。 每次我單擊按鈕時，它也會附加數據。

JavaScript..

$(document).on('ready', function() {
    
    $('#button').on('click', function() {
    $.ajax('reviews.json', {
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            for(var i = 0; i < data.length; i++) {
                $('.prod-review').append('<dd>' + 'User ID:' + ' ' + data[i].id + '</dd>');
                $('.prod-review').append('<dd>' + 'Product:' + ' ' + data[i].product_id + '</dd>');
                $('.prod-review').append('<dd>' + 'Nickname:' + ' ' + data[i].nickname + '</dd>');
                $('.prod-review').append('<dd>' + 'Review:' + ' ' + data[i].review + '</dd>');
                $('.prod-review').append('<dd>' + 'Rating:' + ' ' + data[i].rating + '</dd>' + '<br/>');
            }
        }
    });
    });

    $('a.show').on('click', function(event) {
        event.preventDefault();
        $(this).find('reviews.json').show();
      });

    $('a.hide').on('click', function(e) {
        e.preventDefault();
        $(this).find('reviews.json').hide();
    });
});

Answer 1

我看到你現在的問題是改變評論的可見性。 將評論包裹在 div 中，然后使用.toggle()顯示或隱藏它。

 $(document).on('ready', function() { $('#button').on('click', function() { var divReviews = $('#moreReviews'); var btnReview = $(this); if (divReviews.text().length) { // reviews already downloaded, change button text // then show or hide it btnReview.text(btnReview.text() == 'SHOW REVIEWS'? 'HIDE REVIEWS': 'SHOW REVIEWS'); divReviews.toggle(); return } divReviews.text('Loading ajax content...'); $.ajax({ url: 'https://httpbin.org/get', type: 'GET', dataType: 'json', success: function(data) { divReviews.text(''); // set dummy data data = [{"id":"1","product_id":"bo","nickname":"Joe","review":"Great:3","rating":"5"}]; for (var i = 0; i < data.length; i++) { var dd = '<dd>User ID: ' + data[i].id + '</dd>' + '<dd>Product: ' + data[i].product_id + '</dd>' + '<dd>Nickname: ' + data[i].nickname + '</dd>' + '<dd>Review: ' + data[i].review + '</dd>' + '<dd>Rating: ' + data[i].rating + '</dd>' + '<br/>'; divReviews.append(dd); } btnReview.text('HIDE REVIEWS'); } }) }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <section class="prod-review"> <section class="review"> <img src="images/review.jpg" alt="icon-1" /> <h4><span class="rating">*****</span><br /><span class="review-header">Great,,.</span></h4> <p>Lorem ipsum dolor sit amet: consectetur adipiscing elit; sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </section> <hr /> <button id="button" style="cursor: pointer;">SHOW REVIEWS</button> <!-- insert ajax content inside this --> <div id="moreReviews"></div> </section>