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

Executing a JS function on page load, based on user input from previous page

本文关键字：加载 执行 函数 JS 一页 输入 用户      更新时间：2023-09-26

概述：我有一个产品页面，里面有一个基于产品类名的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的新手，所以如果有任何其他建议来清理我的脚本，我将不胜感激！

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

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

例如。

首页：<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>

  1. localstorage：与上面的类似，但当单击链接时，将值存储到localstorage中，然后在下一页中检索它，并再次调用display函数/hide项。

  2. 请求参数和控制器方法的混合-根据请求参数，最初使用显示属性设置链接样式。

相关文章：