javascript - 尝试根据用户点击的内容显示显示的数据

Question

看这里: http://test.neworgan.org/100/

向下滚动到社区部分。

我想要实现的是获取新组织者的数据(例如: friend 数量/捐赠金额)，以便在用户单击缩略图时显示。现在每个用户都有自己独特的数据存储在外部。

用户单击缩略图后，“inline1”就会随内容一起出现。

到目前为止，我只能从最后一个用户获取数据来显示，无论我点击哪个用户的缩略图。我只需要一些关于如何根据用户单击的缩略图来更改内容的帮助。所以我想知道我是否可以在这里得到一些帮助？

这是重要的代码部分:

      <div class="top-fundraisers-wrapper">
     <div class="subsection top-fundraisers">

    <?php if ($top_fundraisers && is_array($top_fundraisers)): ?>
        <?php foreach ($top_fundraisers as $index => $fundraiser): ?>
           <a title="" class="fancybox" href="#inline1">
        <div class="top-fundraiser">

<div id="newo<?php print htmlentities($index + 1); ?>" class="top-fundraiser-image">
              <img src="<?php
          if($fundraiser['member_pic_medium']) {
                  print htmlentities($fundraiser['member_pic_medium']);
          } else {
            print $template_dir . '/images/portrait_placeholder.png';
          }
              ?>"/>
            </div>
    </div>
    </a>
        <?php endforeach;?>
    <?php endif; ?>

  </div>
</div>
</div>

<div id="inline1">
    <div class="top-fundraiser-image2">
    <img src="<?php
          if($fundraiser['member_pic_large']) { print htmlentities($fundraiser['member_pic_large']);
          } else {
            print $template_dir . '/images/portrait_placeholder.png';
          }
            ?>"/>
            </div>

    <span class="member-name"><?php print htmlentities($fundraiser['member_name']); ?></span>
        <span class="friend-count"><?php print number_format($fundraiser['num_donors']) . (($fundraiser['num_donors'] == 1) ? ' Friend' : ' Friends'); ?></span>


        <span class="fundraisers-text"> Donated: </span><span class="fundraisers-gold"> $<?php print number_format($fundraiser['total_raised']); ?></span>

</div>

Answer 1

最好的方法是使用 Ajax。像这样的事情

$("#button").click( function() {
$.ajax({
    url: 'file.php',
    method: 'post',
    data: { id: $(this).val() },
    error: function() {
        alert('error while requesting...');
    }, success: function(data) {
        alert( data ); /** received data - best to use son **/
    }
 });
 });

接下来解析 json var json = $.parseJSON(data);或者...使用 dataJson 选项。

下一步应使用类或 ID 将数据插入到特定位置。