移动版和桌面版 - 避免使用具有相同 ID 的两个元素

Question

我有两种表格，一种用于桌面版，另一种用于移动版。内容相同，但显示却大不相同。

因为它是一个长形式，所以我确实有两个不同的"div"，每个版本一个。

<div class="desktop-version">
<!-- blah blah blah my long form -->
</div>
<div class="mobile-version">
<!-- blah blah blah my long form -->
</div>

起初，我只是想在我的CSS文件中放一个"display： none"来隐藏一个表单，让另一个表单可见。

但后来我意识到如果我这样做，我将有两个具有相同 ID 的字段(一个可见，一个隐藏(。显然，我不想有两个具有相同ID的字段...

请问有人有适当的方法来解决我的问题吗？

谢谢

Answer 1

您可以使用window.innerWidth来确定窗口的宽度并根据它做事。 假设 HTML

<div class="desktop-version">
<input name="email" type="email">
</div>
<div class="mobile-version">
<input name="email" type="email">
</div>

在 JS 中

var mobileWidth = 769; // in px
var formParent;
if (window.innerWidth < mobileWidth) {
// Yay, on mobile, do whatever
formParent = document.querySelector('.mobile-version');
} else {
// You're on desktop
formParent = document.querySelector('.desktop-version');
}
// Access value of <input name="email">
var email = formParent.querySelector('[name="email"]').value;

您不必为元素提供 ID，您可以使用querySelector()使用 CSS 等标识符访问它们。在这里，我们根据屏幕尺寸更改父元素。在那之后，我们可以做剩下的事情。