Question

我有一个可以根据位置，技能，姓名等进行过滤的人员列表。

桌面版本是具有选项和搜索按钮的div，如下所示：

       <div class="form-group col-xs-12 col-md-12" style="position: absolute; display: contents;">
            <div class="search-input ">
                <input type="text" name="s" id="s" class="input-text full-width" placeholder="<?php _e( 'Search by name', 'trav') ?>" value="<?php echo esc_attr( $s ); ?>" />
            </div>
            <div class="col-xs-6">
                <button class="btn-medium icon-check full-width search-again"><?php _e( 'Search', 'trav' ) ?></button>
            </div>
       </div>

（此示例仅在此处粘贴1个过滤器）

然后移动版本是台式机版本的副本，但是在引导程序折叠中。我在移动设备中隐藏了桌面过滤器，并在 bootstrap 中使用hidden类来隐藏移动设备过滤器。

它在台式机上运行良好，但是当移动版本出现时，过滤器不适用，也就是说，它显示了完整的结果列表，而不是台式机那样的过滤列表。

是否可以重复元素？

Answer 1

没有更多的代码，我没什么可继续的。如果没有在这里使用相关的php，html和javascript，对我来说是不可能真正知道发生了什么。因此，请更新您的问题，我会再看一遍。

但是基于这个小片段和您使用的一些话来说，我有一种直觉。

主要在这里看到的是name="s"和id="s"属性。您说桌面过滤器工作正常。但是移动筛选器不是桌面筛选器的“副本”吗？ 您只是复制并粘贴了它吗？在HTML代码中，桌面过滤器是否位于移动过滤器之前？

另一个观察结果是，我注意到此过滤器未包装在<form>元素内吗？移动设备和台式机是否包装在同一<form>中？

这是我想知道的事情。

如果移动输入和桌面输入具有相同的名称属性（都具有name="s"），并且它们被包装在相同的form元素中，那么这很有意义。因为每当您提交表单时，您实际上就是在发送PHP name="s"的2个实例，并且因为name="s"的第一个实例（桌面过滤器）在移动设备上为空，所以PHP忽略了第二个实例并发回您在技术上要求的空过滤列表。但是它可以在桌面上使用，因为name="s"的第一个实例具有一个值。

如果这种疯狂的猜测是正确的，那么您的解决方案就是。

将两个过滤器分成单独的表单元素。

还请确保删除重复的名称和id属性。

现在我再次称其为疯狂猜测，因为那是事实，我没有什么可继续的。正如我所说的，提供更多代码，我将再看一遍。

但又有一个人在想你。这些过滤列表是否用任何JavaScript实现？因为js在使用重复的id属性时效果不佳。它将查看第一个实例，而忽略所有其他实例。正如它应该。或破坏整个脚本。

需要更多代码。

仅适用于台式机的移动设备/台式机重复搜索过滤器

1 个答案: