使用 AJAX、JQuery 和 HTML 显示/隐藏数据

Question

As part of a "Review" section, I have a button to read all reviews, with only a few on the page at the moment. I want the button to show the data from a.json file using AJAX and JQuery.

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 Data..

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

With this code, the data is appending to the page under the button when it is clicked, although showing all as one string, like this..

499 b-oJoeGreat:35

I am relatively new to JS and completely new to AJAX and JQuery, and I want to get an understanding of how it works.

Basically I need the data in the JSON file to appear under the button when clicked and then hide when the button is clicked again. Preferably with the data split as well, so it doesn't all appear on one line. I have spent a couple of days trying different things and this is the closest I got.

Any help would be much appreciated.

Edit. I split the objects using some simple code. It now appears how I want it to on screen when I click the button, but it won't hide it. It also appends the data everytime I click the button.

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

I see your problem now is changing visibility of the review. Wrap the review inside div then use .toggle() to show or hide it.

 $(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>