Javascript 如何选择while循环中的href变量？

我有一个while循环，可以从数据库中选择多个图像。我有一个带有a href的链接，单击该链接时会打开一个视频模式框。现在，无论选择哪一个链接，它都只选择第一个href链接。如何确保它是正确的href，而不仅仅是第一个href

PHP：这部分工作正常

while ($row = $q->fetch()): 

?>

  <li class="item <?php echo $row['type'];?>"><a href="<?php echo $row['link'];?>" class="test-popup-link">
  <?php if($row['img']) { ?>
  <img src="upload/videoCovers/<?php echo $row['img'];?>" alt="<?php echo $row['title'];?>">
  <?php } 
        else { ?>
  <img src="upload/videoCovers/playBtn.png" alt="<?php echo $row['title'];?>">
  <?php } ?>
  </a>
  </li>

---

我对该插件一无所知，但是，您可能希望使用

.test popup链接

类循环遍历所有元素，并调用

.magnificpoup（）

。考虑以下事项：

$(document).ready(function(){   
    $('.test-popup-link').each(function() {
      $(this).magnificPopup({
          items: {
            src: $(this).attr('href')
          },
          type: 'iframe' // this is default type
      });
    });
});

编辑：快速查看后，您似乎也可以使用以下示例

[…]如果要从一个容器中的元素列表创建弹出窗口，请使用此方法。请注意，此方法不启用gallery模式，它只是减少了click事件处理程序的数量；每个项目将作为单个弹出窗口打开

html

因此，在您的情况下，您可能需要考虑将<>代码> UL/COD>父对象放在列表中。

$（'.load video'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var link=$（this.attr（'href'）；
$（'.test popup link'）。放大弹出窗口({
项目：{
链接
},
类型：“iframe”//这是默认类型
});
});

在标记中添加类

<a class="load-video test-popup-link" href="<?php echo $row['link'];?>">

---

让我指出代码中的几个问题

$(document).ready(function(){   
    var videoLink = $(".test-popup-link").attr("href"); // ( 1 )

    $('.test-popup-link').magnificPopup({               //( 2 )
        items: {
          src: videoLink                                //( 3 )
        },
        type: 'iframe' // this is default type
    });
});

$（“.test popup link”）.attr（“href”）这里的代码
$（“.test popup link”）
将返回类
test popup link
中的所有元素，因此您将获得一个节点集合，这很好。现在，当您执行
.attr（“href”）
时，只会选择集合中的第一个节点，并返回其href
您正在尝试使用类
test popup链接将插件应用于所有元素，这很好，除非插件的内部配置相同。在您的情况下，它在
videoLink
值中有所不同，因此您不能以通用方式使用它必须使用循环来应用插件

如上所述，您的
videoLink
仅保留第一个元素href，并且只有此第一个href值将应用于所有
因此，解决方案是使用循环来应用插件。这是密码

$(document).ready(function(){   
    $.each('.test-popup-link',function() { //looping
      $(this).magnificPopup({              // apply to each element in the loop
          items: {
            src: $(this).attr('href')      // apply its respective href
          },
          type: 'iframe' // this is default type
      });
    });
});

为什么要注册一个额外的点击处理程序？这似乎是无用的开销。我认为对于打开模式，放大弹出窗口有默认的点击打开吗？因为我不使用magnific，我也不使用magnific，但是，可以假设调用
magnificpoop（）
后，正在注册一个单击处理程序。根据OP，单击第一个元素可以按预期工作。所以，你的答案除了在点击时注册点击处理程序外，真的没有任何作用。谢谢大家的帮助！它现在工作得很好。谢谢大家的意见，非常感谢！你的第一个建议非常有效。Np@MikeCerveni如果此解决方案对您有效，请随时联系。这将有助于让其他人知道，这样他们就不会继续提供答案：）
<a class="load-video test-popup-link" href="<?php echo $row['link'];?>">

$(document).ready(function(){   
    var videoLink = $(".test-popup-link").attr("href"); // ( 1 )

    $('.test-popup-link').magnificPopup({               //( 2 )
        items: {
          src: videoLink                                //( 3 )
        },
        type: 'iframe' // this is default type
    });
});

$(document).ready(function(){   
    $.each('.test-popup-link',function() { //looping
      $(this).magnificPopup({              // apply to each element in the loop
          items: {
            src: $(this).attr('href')      // apply its respective href
          },
          type: 'iframe' // this is default type
      });
    });
});