javascript - 点击图片显示url的函数

Question

我有一个表单，其中包含可供选择的图像循环。为了最终进行 ajax post 调用，我需要在单击图像时获取图像的 url。

在图像循环所在的表单中，我有一个脚本 block ，它对图像使用 onclick 函数，但是当我单击图像时(在控制台日志中使用“test”或“good”)我在控制台中没有收到任何响应。

我做错了什么？

<form action="changeImage.php" method="post">
    <?php foreach($imageResult as $im): ?>
      <?php if($im['type'] == 'background' ) {?>
        <img class="backgroundImage" style="width: 200px; height: 200px;" src="<?php echo $im['url'] ?>">
      <?php } ?>
    <?php endforeach ?>

    <input type="hidden" name="pageID" value="<?php echo $page['id']?>">

    <script type="text/javascript">
       var BgImg = document.getElementsByClassName('backgroundImage');
       BgImg.onclick = function(){console.log(<URL here>)};  
    </script>
 </form>

Answer 1

Document.getElementsByClassName()返回一个数组。您需要循环遍历它才能访问返回的对象。

尝试设置您的onclick在 div 元素内部调用，这样您就不会在加载 javascript 序列时遇到问题，为什么还要循环两次？*。

<img class="backgroundImage" onclick='click()' style="width: 200px; height: 200px;" src="<?php echo $im['url'] ?>">

然后在你的 <script></script> 中标签，创建单击元素时调用的单击函数。

您将自动获取函数内部传递的事件对象。在那里您可以访问目标元素及其属性。

它应该看起来像这样:

<form action="changeImage.php" method="post">
  <?php foreach($imageResult as $im): ?>
    <?php if($im['type'] == 'background' ) {?>
      <img class="backgroundImage" onclick='click()' style="width: 200px; height: 200px;" src="<?php echo $im['url'] ?>">
    <?php } ?>
  <?php endforeach ?>

  <input type="hidden" name="pageID" value="<?php echo $page['id']?>">

  <script type="text/javascript">
    function click() {
      console.log(event.target.getAttribute('src'));
    } 
  </script>
</form>

如果你把它放在 DOMContentLoaded 中，你也可以按照你想要的方式去做。事件监听器(jquery 的纯 js $(document).ready() 因此它会在加载的 dom 上设置逻辑)。

像这样:

<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    var BgImg = document.getElementsByClassName('backgroundImage');
    BgImg.map(img => {
      img.onclick = function(){console.log(event.target.getAttribute('src'))};
    });
  });
</script>