Question

我正在创建一个页面，当单击一个锚标记时，它会从与该锚点关联的URL中提取数据。我希望引入的数据仅显示在与该锚点关联的div类弹出窗口中。每个锚点和div类弹出窗口都在名为employee的父div中。现在单击它会拉入数据但是会跳到页面上的每个div类弹出窗口。我试过.find和.children，但两个都没有用。任何人都可以帮助我吗？

＆＃13;

    (function($) {


      function find_page_number(element) {
        return parseInt(element.html());
      }

      $('.leadership').on('click', function(event) {
        event.preventDefault();

        page = find_page_number($(this).clone());

        var memberSrc = $(this).attr('href');

        $.ajax({

          url: memberSrc,
          type: 'get',
          dataType: 'html',
          data: {
            action: 'ajax_pagination',
            query_vars: ajaxpagination.query_vars,
            page: page
          },
          success: function(html) {
            $(".popup").empty();
            $('.popup').append($(html).find('.single-member').html());
          }

        });


      })
    })(jQuery);

＆＃13;

<div class="employee">
  
  <a class="leadership" href="different for each">
 
    <img src="#" />
    
  </a>
  
  <div class="popup"></div>
  
</div>

<div class="employee">
  
  <a class="leadership" href="different for each">
 
    <img src="#" />
    
  </a>
  
  <div class="popup"></div>
  
</div>

＆＃13;

Answer 1

我认为这会为你做 - 你需要使用.find()

定位子弹出标签

 $('.leadership').on('click', function(event) {
    event.preventDefault();

    var $this = $(this).parent();
    ^^^^^^^^^^^^^^^^^^^^
    page = find_page_number($(this).clone());

    var memberSrc = $(this).attr('href');

    $.ajax({

      url: memberSrc,
      type: 'get',
      dataType: 'html',
      data: {
        action: 'ajax_pagination',
        query_vars: ajaxpagination.query_vars,
        page: page
      },
      success: function(html) {
        var popup = $this.find(".popup");
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        popup.empty();
        popup.append($(html).find('.single-member').html());
      }

Answer 2

那是因为您正在使用类选择器.popup并且页面上有多个弹出窗口。

要获得所需弹出窗口的引用，您可以转到父级并在元素中查找弹出窗口，或者查看.leadership的兄弟姐妹。

这样的事情可能有用：

$('.leadership').on('click', function(event) {
    event.preventDefault();

    page = find_page_number($(this).clone());

    var memberSrc = $(this).attr('href');

    // Get a reference to your parent employee div
    var parent = $(this).parent();

    $.ajax({

      url: memberSrc,
      type: 'get',
      dataType: 'html',
      data: {
        action: 'ajax_pagination',
        query_vars: ajaxpagination.query_vars,
        page: page
      },
      success: function(html) {
        var popup = parent.find(".popup");
        popup.empty();
        popup.append($(html).find('.single-member').html());
      }
});

数据显示在每个子div

2 个答案: