Question

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

在表单中，即图像的循环所在的位置，我有一个脚本块，该脚本块对图像使用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()返回一个数组。您需要遍历它以访问返回的对象。

尝试在div元素内设置onclick调用，这样您就不会对JavaScript的加载顺序产生任何问题，并且为什么还要循环两次？*。

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

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

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

它应该看起来像这样：

<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事件监听器中，也可以根据需要进行操作（纯jjs $(document).ready()的js，因此可以在加载的dom上设置逻辑）。

像这样：

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

单击图像以显示网址的功能

1 个答案: