Question

我的网站上有一个简单的复选框列表。

我需要的是：当用户点击一个或两个选项时，页面重新加载仅显示与用户所做选择相关的图像并隐藏所有其余部分。

我不希望整个页面重新加载，只是我的div所在的主体。

为了明白我的观点，这是一个例子： http://www.entel.pe/personas/catalogo-equipos/

在左侧的垂直条上，单击“Marcas”，然后如果单击该列表上的一个或两个选项，您将看到只有一个网站块加载并隐藏右侧的所有图片，除了那些与你的选择有关的。

<!-- language: lang-html -->
<div class="brands_products"><!--brands_products-->
    <h2>Marcas</h2>
        <div class="brands-name">
            <ul class="nav nav-pills nav-stacked">
                <div class="clearfix">
                    <input id="ffc-telefonia-movil-19" name="ffc-tipo-equipo[]" class="checkbox" value="19" type="checkbox" >
                    <span class="pull-right">(50)</span>
                    <label class="margen-left-5 flotar-izq padding-top-2">Accer</label>
                </div>
                <div class="clearfix">
                    <input id="ffc-telefonia-movil-19" name="ffc-tipo-equipo[]" class="checkbox" value="19" type="checkbox">
                    <span class="pull-right">(10)</span>
                    <label class="margen-left-5 flotar-izq padding-top-2">Apple</label>
                </div>
                <div class="clearfix">
                    <input id="ffc-telefonia-movil-19" name="ffc-tipo-equipo[]" class="checkbox" value="19" type="checkbox">
                    <span class="pull-right">(8)</span>
                    <label class="margen-left-5 flotar-izq padding-top-2">HP</label>
                </div>
                <div class="clearfix">
                    <input id="ffc-telefonia-movil-19" name="ffc-tipo-equipo[]" class="checkbox" value="19" type="checkbox">
                    <span class="pull-right">(27)</span>
                    <label class="margen-left-5 flotar-izq padding-top-2">Lenovo</label>
                </div>
                <div class="clearfix">
                    <input id="ffc-telefonia-movil-19" name="ffc-tipo-equipo[]" class="checkbox" value="19" type="checkbox">
                    <span class="pull-right">(30)</span>
                    <label class="margen-left-5 flotar-izq padding-top-2">Sansung</label>
                </div>
                <div class="clearfix">
                    <input id="ffc-telefonia-movil-19" name="ffc-tipo-equipo[]" class="checkbox" value="50" type="checkbox">
                    <span class="pull-right">(19)</span>
                    <label class="margen-left-5 flotar-izq padding-top-2">Sony</label>
                </div>
            </ul>
        </div>
</div><!--/brands_products-->

任何帮助将不胜感激。谢谢！

Answer 1

是的，您正在寻找AJAX。基本的想法是，您可以通过复选框查看活动。（示例假设您正在使用jQuery。）

$('input[type=checkbox]').change(function() { //when checked or unchecked... });

根据更改，您可以将新内容调用到页面上并替换现有内容。（http://api.jquery.com/jquery.ajax/）

$.ajax({
  url: "newContent.html",
  context: document.body
}).done(function( html ) {
  $( '#main_section' ).html( html );
});

一般来说，这意味着您需要远程提供替代内容。在服务器上的另一个页面上或某个数据库中。

Answer 2

您需要使用Ajax来处理新图像的请求，而不是在加载时加载图像，您可以使用jquery和ajax从DB动态地提取这些图像和数据。

您可以在此处查看示例或查看如何执行此操作。

选中复选框后，如何刷新部分页面？

2 个答案: