Question

OUTLINE：我有一个产品页面，其中包含一个基于产品类名称的jQuery过滤系统。我在下面提供了我的代码的基本示例：

// PRODUCTS PAGE FUNCTIONS
function filterAll() {
  $('.download').show("slow");
  $('.ourprod').show("slow");
  $('.accessories').show("slow");
  $('.club').show("slow");
}

function filterClubs() {
  $('.download').hide("slow");
  $('.ourprod').hide("slow");
  $('.accessories').hide("slow");
  $('.club').show("slow");
}

function filterProds() {
  $('.download').hide("slow");
  $('.club').hide("slow");
  $('.accessories').hide("slow");
  $('.ourprod').show("slow");
}

function filterAccess() {
  $('.download').hide("slow");
  $('.club').hide("slow");
  $('.ourprod').hide("slow");
  $('.accessories').show("slow");
}

function filterVideos() {
  $('.accessories').hide("slow");
  $('.club').hide("slow");
  $('.ourprod').hide("slow");
  $('.download').show("slow");
}

//HOMEPAGE FUNCTION
function loadProductsPage() {
  window.location = 'products.php';
}

// PRODUCTS PAGE EVENTS
$('#filterall').click(function() {
  filterAll();
});
$('#filterclubs').click(function() {
  filterClubs();
});
$('#filterprods').click(function() {
  filterProds();
});
$('#filteraccessories').click(function() {
  filterAccess();
});
$('#filtervideos').click(function() {
  filterVideos();
});

.box {
  background: red;
  width: 100px;
  height: 100px float: left;
}
.filter a {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav id="shop-filter">
  <section class="container">
    <div class="row">
      <ul class="filter nav navbar-nav">
        <li><a id="filterall">All</a>
        </li>
        <li><a id="filterclubs">Clubs</a>
        </li>
        <li><a id="filterprods">Our Products</a>
        </li>
        <li><a id="filteraccessories">Accessories</a>
        </li>
        <li><a id="filtervideos">Videos</a>
        </li>
      </ul>
    </div>
  </section>
</nav>

<div class="box club">
  <h4>CLUB</h4> 
  <span> - $89.99</span>
</div>
<div class="box ourprod">
  <h4>PRODUCT</h4>
  <span> - $39.99</span>
</div>
<div class="box download">
  <h4>Download</h4>
  <span> - $9.95</span>
</div>
<div class="box accessories">
  <h4>Accessories</h4>
  <span> - $XX.XX</span>
</div>

问题：在主页上，我有链接，我想直接到产品页面但在页面加载后应用相应的过滤器。这是主页HTML，它链接到上面的脚本：

<a id="loadclubs" href="javascript:void(0)">
  <h1>Training Clubs</h1>
</a>
<a id="loadvideos" href="javascript:void(0)">
  <h1>Training Videos</h1>
</a>
<a id="loadaccessories" href="javascript:void(0)">
  <h1>Accessories</h1>
</a>

我是jQuery / Javascript的新手，所以任何其他建议来清理我的脚本都将不胜感激！

Answer 1

当您在不发布数据的情况下链接到下一页时，您需要使用某种方法来存储信息并在下一页上检索它。然后需要通过javascript读取以修改DOM。有一些方法可以做到这一点：

请求参数：<a href=newpage.html?from=accessories>，然后在下一页中，var req = get('from'); // == accesories（其中req（）是一个获取请求变量的函数），然后当页面加载时，通过调用适当的功能或只是根据需要隐藏物品。

例如

第一页：<a id="loadclubs" href="item?id=123&filter=accessories">Training Clubs</h1></a>

第二页：

<script>
    var filter = .....; // get the filter param

    if (filter == "accessories") { filterAccess(); }
       OR
    if (filter == "accessories") {
        $('.download').css("display", "none");
        $('.club').css("display", "none");
        $('.ourprod').css("display", "none");
        $('.accessories').css("display", "initial");
    }
</script>

localstorage：与上面类似，但是当点击一个链接时，将值存储到localstorage中，然后在下一页中将其恢复，再次调用display functions / hide items。
请求参数和控制器方法的混合 - 根据请求参数，最初为具有显示属性的链接设置样式。

根据上一页的用户输入，在页面加载时执行JS功能

1 个答案: