在具有屏幕分辨率的 div 之间切换

Question

我需要一些建议来解决这个问题。 当屏幕分辨率发生变化时，我想将一个 div 切换为另一个。 这有效，但是我如何处理所有带有 id 的元素，因为我不能两次使用相同的 id？ 在 div 中，我有几个选择/输入元素。 div 的内容相同，但布局完全不同。

我使用引导程序作为框架，但我不能使用 col-lg-4 等，因为布局完全不同。

我再解释一下。 我有两个 div，一个用于小屏幕，一个用于大屏幕。 我想使用相同的 javascript 来访问选择。 选择将显示相同的值。 （我将有 30 个不同的元素，它们将为两个 div 显示相同的值）。 解决这个问题的最佳方法是什么？

<div class="LargeScreen">    
    <select id="id1"  style="width:100%">
      <option value=''>TEST1</option>
      <option value=''>TEST2</option>
      <option value=''>TEST2</option>
      <option>Reserv</option> 
    </select>   
</div>

<div class="SmalScreen">    
    <select id="id1"  style="width:100%">
      <option value=''>TEST1</option>
      <option value=''>TEST2</option>
      <option value=''>TEST2</option>
      <option>Reserv</option> 
    </select>    
</div>

Answer 1

为什么不引用您的id ，而是将多个class添加到您的<div>并引用它们。

您正确的id's应该是/是唯一的，但由于仅使用class它可以设置多次。

你可以这样设置：

<div class="sameClass" id="id1"></div>
<div class="sameClass" id="id2"></div>
<div class="sameClass" id="id3"></div>

比你可以参考，就像在我的例子中一样，对sameClass类

希望这能回答你的问题——如果我理解正确的话！

Answer 2

我再解释一下。 我有两个 div，一个用于小屏幕，一个用于大屏幕。 我想使用相同的 javascript 来访问选择。 选择将显示相同的值。 （我将有 30 个不同的元素，它们将为两个 div 显示相同的值）。 解决这个问题的最佳方法是什么？

<div class="LargeScreen">    
    <select id="id1"  style="width:100%">
      <option value=''>TEST1</option>
      <option value=''>TEST2</option>
      <option value=''>TEST2</option>
      <option>Reserv</option> 
    </select>   
</div>

<div class="SmalScreen">    
    <select id="id1"  style="width:100%">
      <option value=''>TEST1</option>
      <option value=''>TEST2</option>
      <option value=''>TEST2</option>
      <option>Reserv</option> 
    </select>    
</div>