Question

所以我有一个狗名工具，就弹出方式而言，我使用单独的json文件将列表中的名称作为列表项填充。以下是执行此操作的html和jquery：

<div class="dnt-container-mobile seasonal-bg-dark">
  <h1 class="mobile-heading">Dog Name Finder</h1>
  <h1 class="wide-heading">
    <!-- <span class="logo teal icon-akc-logo dnt-logo"></span> -->Dog Name Finder</h1>
  <form class="dnt-tool" id="dnt" name="dnt">
    <div class="dnt-overlay">
      <input id="male" name="gender" type="radio" value="Male" />
      <label for="male">Male</label>
      <input data-id="594" id="female" name="gender" type="radio" value="Female" />
      <label for="female">Female</label>
      <input checked="checked" data-id="0" id="all" name="gender" type="radio" value="All" />
      <label for="all">All</label>
      <select>
            <option data-id="0" value="/dog-name-finder/">Select a Category</option>
            <option data-id="0" value="/dog-name-finder/">All</option>
            <option value="/dog-name-finder/baby/">Baby</option>
            <option data-id="602" value="/dog-name-finder/celebrity/">Celebrity</option>
            <option data-id="603" value="/dog-name-finder/cute/">Cute</option>
            <option data-id="598" value="/dog-name-finder/disney/">Disney</option>
            <option data-id="600" value="/dog-name-finder/fancy/">Fancy</option>
            <option data-id="605" value="/dog-name-finder/most-popular/">Most Popular</option>
            <option data-id="599" value="/dog-name-finder/presidential/">Presidential</option>
            <option data-id="597" value="/dog-name-finder/techy/">Techy</option>
            <option data-id="596" value="/dog-name-finder/television/">Television</option>
            <option data-id="606" value="/dog-name-finder/trendy/">Trendy</option>
            <option data-id="595" value="/dog-name-finder/unisex/">Unisex</option>
            <option data-id="604" value="/dog-name-finder/video-game/">Video Game</option> 
      </select>
    </div>
    <!-- end of dnt-overlay -->
    <div class="dnt-btn">
      <button id="submit" type="submit">Show Names</button>
    </div>
    <!-- end of dnt btn -->
  </form>
  <!-- end of dnt-tool -->
</div>
<!-- end of dnt-container-mobile -->

以下是jquery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/jquery.magnific-popup.min.js"></script>
<script>
  $(document).ready(function() {
        $('#dnt').submit(function(e) {
          var cat_id = $('.dnt-overlay > select > option:selected').data('id') || 0;
          var cat_title = $('.dnt-overlay > select > option:selected').text() || 'All';
          if (cat_id === 0) {
            cat_title = 'All';
          }
          var dnt_url = $('.dnt-overlay > select > option:selected').val() || '/dog-name-finder/';
          var gender = $('.dnt-overlay > [name=gender]:checked').data('id') || 0;
          var gender_title = $('.dnt-overlay > [name=gender]:checked').val() || 'All';
          var title = cat_title;
          var html = '';

          var params = '';

          if (window.innerWidth <= 320) {
            params = '?limit=18';
          } else {
            params = '?limit=21';
          }


          if (cat_id > 0) {
            params += '&' + 'cat_id=' + cat_id;
          }

          if (gender > 0 && cat_title != 'Gender Agnostic' && cat_title != 'Unisex' && cat_title != 'Male' && cat_title != 'Female') {
            title += ' ' + gender_title;
            params += '&' + 'gender=' + gender;
            if (cat_title == 'All') {
              dnt_url += gender_title.toLowerCase() + '/';
            } else {
              dnt_url += '?gender=' + gender_title.charAt(0).toLowerCase();
            }
          }

          title += ' Dog Names';

          $('#dnt-popup > h1').text(title);
          $('#dnt-popup > .more-btn').find('a').attr('href', dnt_url);



          e.preventDefault(); // We don't need to send the form, because it's all local
          if ($('#male').is(':checked')) { // Check if male is checked
            $('#dnt-popup').removeClass('dnt-all').removeClass('dnt-female').addClass('dnt-male');
          } else if ($('#female').is(':checked')) { // Check if female is checked 
            $('#dnt-popup').removeClass('dnt-all').removeClass('dnt-male').addClass('dnt-female');
          } else if ($('#all').is(':checked')) { // Check if all is checked
            $('#dnt-popup').removeClass('dnt-female').removeClass('dnt-male').addClass('dnt-all');
          }
          $.ajax({
              type: 'GET',
              dataType: "json",
              url: "/wp-content/themes/akc/dnt.json" + params,
            })

            .done(function(data) {

              $.each(data, function(index, value) {
                html += '<li>' + value.title + '</li>';
              });

              $('#dnt-popup > .results-list > ul').html(html);

              $.magnificPopup.open({ // open pop up for male
                items: {
                  src: '#dnt-popup',
                  type: 'inline'

                }, //item
                mainClass: 'animated slideInRight'
              }); ///popup open


            });



        }); ///submit function 



        $('#dnt-popup > .more-btn > .long-btn > a, #dnt-popup > .more-btn > .short-btn > a').on("click", function() {

          var cat_id = $('.dnt-overlay > select > option:selected').data('id') || 0;
          var cat_title = $('.dnt-overlay > select > option:selected').text() || 'All';
          if (cat_id === 0) {
            cat_title = 'All';
          }

          var gender_title = $('.dnt-overlay > [name=gender]:checked').val() || 'All';



        }); ///submit function
</script>

以下是json文件中的部分数据：

[{
    "Name": "Aaliyah",
    "Female": 594,
    "Baby": 601
  },
  {
    "Name": "Abby",
    "Female": 594
  },
  {
    "Name": "Abe",
    "Male": 593,
    "Video Games": 604
  }
]

数据未定义的任何原因？ json格式正确。没有控制台错误消息。

Answer 1

您的JSON中没有密钥title。您必须使用value.Name来访问名称

var data = [{
    "Name": "Aaliyah",
    "Female": 594,
    "Baby": 601
  },
  {
    "Name": "Abby",
    "Female": 594
  },
  {
    "Name": "Abe",
    "Male": 593,
    "Video Games": 604
  }
];

$.each(data, function(index, value) {
 console.log(value.Name);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果您想将名称限制为21（在评论中提问），那么您可以这样做

$.each(data, function(index, value) {
 if(index==21){
  return false;
 }
 console.log(value.Name);
});

为什么来自JSON文件的列表项会返回未定义的jQuery？

1 个答案: