Question

你好，我的JavaScript有问题。有人已经通知我不要在我的代码中使用document.getElementById，但是我应该使用什么使它起作用，是否应该在我的代码中更改其他内容？

我正在建立一个网站，用户可以在其中上传帖子。

            echo '<a class="annons-tb">
              <div style="background-image: url(img/gallery/'.$row["imgFullNameGallery"].');"></div>
              <h3>'.$row["titleGallery"].'</h3>
              <p>'.$row["descGallery"].'</p>
                <input type="button" class="button1" name="id" value="Visa Mer Info" onclick="on()"></a>
              <div id="overlay" onclick="off()">
              <div id="text">
              <img src="data:img/gallery/jpeg;base64,'.base64_encode($row["imgFullNameGallery"]).'" width="250" height="250">
              <h3>'.$row["titleGallery"].'</h3>
              <p1>Beskrivning: '.$row["descGallery"].'</p1>
              <div id=p-delen">
              <br />
              <p>Pris: '.$row["prisGallery"].'</p>
              <p>Namn: '.$row["namnGallery"].'</p>
              <p>Mail: '.$row["emailGallery"].'</p>
              <p>TelefonNummer: '.$row["nummerGallery"].'</p>
              </div>
              </div></div><script>
                function on() {
                  document.getElementById("overlay").style.display = "block";
                }

                function off() {
                  document.getElementById("overlay").style.display = "none";
                }
                </script>';

        }
    }
    ?>
      </div>

我已经制作了叠加效果，因此，当您单击按钮时，您可以查看有关该帖子的更多信息，但是现在，当您按下该按钮时，它总是显示第一篇帖子的额外信息。

Answer 1

如果您为两种类型的元素（input[type='button']和div）分配了事件侦听器，但删除了ID属性-例如，替换为具有相同值的类，则可以轻松监视事件被任何这样的触发。

<script>
    document.addEventListener('DOMContentLoaded',()=>{
        Array.prototype.slice.call( document.querySelectorAll( 'div.overlay, button.button1' ) ).forEach( function(node){
            node.addEventListener('click', function(e){
                e.preventDefault();
                switch( this.tagName ){
                    case 'INPUT':
                        this.style.display='block';
                    break;
                    case 'DIV':
                        this.style.display='none';
                    break;
                }
            });
        });
    });
</script>

以上方法使用forEach方法来遍历使用document.querySelectorAll找到的节点集合-但是某些浏览器不支持在nodelist上使用此方法，因此使用{{ 1}}，将节点列表转换为数组。

支持的HTML / PHP（本质上相同，但类的ID属性已更改，并且已正确缩进）

Array.prototype.slice.call

我对以上内容进行了一些更正（撰写时未经过测试-抱歉），并整理了一个演示。您会注意到javascript出现在HTML主体之前-事件侦听器已注册，因为事件侦听器已分配给主体，该事件侦听器实际上等待所有DOM元素呈现后再尝试绑定到特定元素。从本质上讲，您可以这样做或在重复内容之后进行

    echo '
        <a class="annons-tb">
            <div style="background-image: url(img/gallery/'.$row["imgFullNameGallery"].');"></div>
            <h3>'.$row["titleGallery"].'</h3>
            <p>'.$row["descGallery"].'</p>
            <input type="button" class="button1" name="id" value="Visa Mer Info">
        </a>
        <div class="overlay">
            <div class="text">
                <img src="data:img/gallery/jpeg;base64,'.base64_encode($row["imgFullNameGallery"]).'" width="250" height="250" />
                <h3>'.$row["titleGallery"].'</h3>
                <p1>Beskrivning: '.$row["descGallery"].'</p1>
                <div class="p-delen">
                    <br />
                    <p>Pris: '.$row["prisGallery"].'</p>
                    <p>Namn: '.$row["namnGallery"].'</p>
                    <p>Mail: '.$row["emailGallery"].'</p>
                    <p>TelefonNummer: '.$row["nummerGallery"].'</p>
                </div>
            </div>
        </div>';
    }
}
?>
  </div>

我应该使用什么代替document.getElementById来工作

1 个答案: