В разделе «Обзор» у меня есть кнопка для чтения всех обзоров, на данный момент на странице только несколько. Я хочу, чтобы кнопка отображала данные из файла .json с использованием AJAX и 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 ..

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

С помощью этого кода данные добавляются на страницу под кнопкой при ее нажатии, хотя все они отображаются в виде одной строки, как это ...

499 b-oJoe Отлично: 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();
    });
});
0
Jamie McGrath 21 Мар 2021 в 03:21

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":"b-o","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>
0
uingtea 21 Мар 2021 в 02:45