Question

向下滚动到社区部分。

我想要实现的是获取新组织者的数据（例如：朋友数量/捐赠金额），以便在用户点击缩略图时显示。现在每个用户都有自己的外部存储的唯一数据。

用户点击缩略图后，会出现带有内容的“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选项。

下一步应使用class或id将数据插入特定位置。

Answer 2

为内容创建另一个循环

<?php if ($top_fundraisers && is_array($top_fundraisers)):
    $i = 1;
    foreach ($top_fundraisers as $index => $fundraiser): ?>
        <a title="" class="fancybox" href="#inline<?php echo $i; ?>">
        // ... content
    <?php $i++;
    endforeach;
endif; ?>

另一个循环

<?php if ($top_fundraisers && is_array($top_fundraisers)):
    $i = 1;
    foreach ($top_fundraisers as $index => $fundraiser): ?>
        <div id="inline<?php echo $i; ?>">
            // inline content here
        </div>
    <?php $i++;
    endforeach;
endif; ?>

Answer 3

希望你的JavaScript函数能够通过调用类打开fancybox。因此，通过以下代码，您无需使用Javascript代码。

构建锚点标记：

<?php
if (!empty($top_fundraisers) && is_array($top_fundraisers)) {
    foreach ($top_fundraisers as $index => $fundraiser) {
        <a title="" class="fancybox" href="#inline<?php echo $fundraiser['id']; ?>">HTML Content Goes Here</a>
        <?php
    } //end of foreach
} // end of if condition
?>

构建弹出HTML DOM：

<?php
if (!empty($top_fundraisers) && is_array($top_fundraisers)) {
    foreach ($top_fundraisers as $index => $fundraiser) {
         <div id="inline<?php echo $fundraiser['id']; ?>">HTML Content Goes Here</div>
        <?php
    } //end of foreach
} // end of if condition
?>

Answer 4

您无法执行此操作，因为PHP运行服务器端并且JavaScript在浏览器中运行。

要执行此操作，您可以使用AJAX按照用户的要求获取div。

...或存储数据客户端，并根据点击的项目更改#inline1的内容

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

4 个答案: