Javascript jquery淡出不是解决方案

对于下面的代码，我正在淡入一些div，但是当我重新加载页面时，div再次可见。我不希望这种情况发生；我需要的是，如果用户单击后退按钮或主页链接，它应该返回到原始格式，否则在重新加载页面时，div必须保持隐藏

$(document).ready(function () {
    $("#prodoneid").click(function () {
        $("#sliderid, .prodcls").fadeOut(250);
    });
});

    <div id="prodoneid" class="prodcls"> <img src="images/zara/thumbnails/1.png" alt="ZARA"/> </div>

    <div id="prodtwoid" class="prodcls">
    <img src="images/zara/thumbnails/2.png" alt="ZARA"/>
    </div>

    <div id="prodthreeid" class="prodcls">
    <img src="images/puma/thumbnails/1.png" alt="PUMA"/>
    </div>

    <div id="prodfourid" class="prodcls">
    <img src="images/hermes/thumbnails/1.png" alt="HERMES"/>
    </div>

</div>

下面是我的html代码

    <div id="prodoneid" class="prodcls"> <img src="images/zara/thumbnails/1.png" alt="ZARA"/> </div>

    <div id="prodtwoid" class="prodcls">
    <img src="images/zara/thumbnails/2.png" alt="ZARA"/>
    </div>

    <div id="prodthreeid" class="prodcls">
    <img src="images/puma/thumbnails/1.png" alt="PUMA"/>
    </div>

    <div id="prodfourid" class="prodcls">
    <img src="images/hermes/thumbnails/1.png" alt="HERMES"/>
    </div>

</div>

---

您必须将div隐藏在cookie或HTML5本地存储中这一事实保存下来，仅适用于较新的浏览器，并在页面加载时处理保存的信息，以便将页面恢复到您以前保存的确切状态。浏览器不会为您这样做

    <div id="prodoneid" class="prodcls"> <img src="images/zara/thumbnails/1.png" alt="ZARA"/> </div>

    <div id="prodtwoid" class="prodcls">
    <img src="images/zara/thumbnails/2.png" alt="ZARA"/>
    </div>

    <div id="prodthreeid" class="prodcls">
    <img src="images/puma/thumbnails/1.png" alt="PUMA"/>
    </div>

    <div id="prodfourid" class="prodcls">
    <img src="images/hermes/thumbnails/1.png" alt="HERMES"/>
    </div>

</div>

客户端上的网页通常是无状态的。除非您自己在页面中设计一些客户端状态，否则它们每次都应该从服务器加载。因此，如果您想创建一些客户端状态，您必须使用ajax将该状态存储在服务器上，并在特定查看器再次加载页面时将该状态放回页面中。或者，您必须使用cookie或HTML5本地存储将状态保存在本地浏览器中，在加载页面时从那里检索状态，并对其进行操作以将页面置于所需状态

    <div id="prodoneid" class="prodcls"> <img src="images/zara/thumbnails/1.png" alt="ZARA"/> </div>

    <div id="prodtwoid" class="prodcls">
    <img src="images/zara/thumbnails/2.png" alt="ZARA"/>
    </div>

    <div id="prodthreeid" class="prodcls">
    <img src="images/puma/thumbnails/1.png" alt="PUMA"/>
    </div>

    <div id="prodfourid" class="prodcls">
    <img src="images/hermes/thumbnails/1.png" alt="HERMES"/>
    </div>

</div>

下面是一些使用cookies进行此操作的伪代码：

    <div id="prodoneid" class="prodcls"> <img src="images/zara/thumbnails/1.png" alt="ZARA"/> </div>

    <div id="prodtwoid" class="prodcls">
    <img src="images/zara/thumbnails/2.png" alt="ZARA"/>
    </div>

    <div id="prodthreeid" class="prodcls">
    <img src="images/puma/thumbnails/1.png" alt="PUMA"/>
    </div>

    <div id="prodfourid" class="prodcls">
    <img src="images/hermes/thumbnails/1.png" alt="HERMES"/>
    </div>

</div>

$(document).ready(function () {
    /* read the cookie "sliderHidden" and if it's is set to 1, 
        then: */
    $("#sliderid, .prodcls").hide(); 


    $("#prodoneid").click(function () {
        $("#sliderid, .prodcls").fadeOut(250);
        /* write a cookie called "sliderHidden" set to 1 
            that remembers that that these items are hidden */
    });
});

对于jQuery，有一种方法可以使读写cookie变得容易。

您应该使用fadeOut，但是如果您想成为前沿技术的一部分，您还应该使用cookie或HTML5 localStorage等技术，以便在页面加载之间保持设置

    <div id="prodoneid" class="prodcls"> <img src="images/zara/thumbnails/1.png" alt="ZARA"/> </div>

    <div id="prodtwoid" class="prodcls">
    <img src="images/zara/thumbnails/2.png" alt="ZARA"/>
    </div>

    <div id="prodthreeid" class="prodcls">
    <img src="images/puma/thumbnails/1.png" alt="PUMA"/>
    </div>

    <div id="prodfourid" class="prodcls">
    <img src="images/hermes/thumbnails/1.png" alt="HERMES"/>
    </div>

</div>

当您淡出元素时，您应该写入您选择的存储状态，在页面加载时，您应该检查存储以查看是否存在以前的状态；如有需要,请联络分区警署

    <div id="prodoneid" class="prodcls"> <img src="images/zara/thumbnails/1.png" alt="ZARA"/> </div>

    <div id="prodtwoid" class="prodcls">
    <img src="images/zara/thumbnails/2.png" alt="ZARA"/>
    </div>

    <div id="prodthreeid" class="prodcls">
    <img src="images/puma/thumbnails/1.png" alt="PUMA"/>
    </div>

    <div id="prodfourid" class="prodcls">
    <img src="images/hermes/thumbnails/1.png" alt="HERMES"/>
    </div>

</div>

你可以阅读更多关于，和。存在一个抽象低级cookie接口的方法，您可能会对它感兴趣

    <div id="prodoneid" class="prodcls"> <img src="images/zara/thumbnails/1.png" alt="ZARA"/> </div>

    <div id="prodtwoid" class="prodcls">
    <img src="images/zara/thumbnails/2.png" alt="ZARA"/>
    </div>

    <div id="prodthreeid" class="prodcls">
    <img src="images/puma/thumbnails/1.png" alt="PUMA"/>
    </div>

    <div id="prodfourid" class="prodcls">
    <img src="images/hermes/thumbnails/1.png" alt="HERMES"/>
    </div>

</div>

---

实际上，您最好的选择可能是查看，它尝试使用localStorage，但如果当前浏览器不支持cookie，则会退回到cookie。

您必须使用某种cookie来保存元素的“隐藏”状态。寻找jquerycookie插件http://archive.plugins.jquery.com/project/Cookie.Hm-HTML是静态的

    <div id="prodoneid" class="prodcls"> <img src="images/zara/thumbnails/1.png" alt="ZARA"/> </div>

    <div id="prodtwoid" class="prodcls">
    <img src="images/zara/thumbnails/2.png" alt="ZARA"/>
    </div>

    <div id="prodthreeid" class="prodcls">
    <img src="images/puma/thumbnails/1.png" alt="PUMA"/>
    </div>

    <div id="prodfourid" class="prodcls">
    <img src="images/hermes/thumbnails/1.png" alt="HERMES"/>
    </div>

</div>

我认为您必须通过一个会话来处理这个问题，这取决于程序语言或cookie

    <div id="prodoneid" class="prodcls"> <img src="images/zara/thumbnails/1.png" alt="ZARA"/> </div>

    <div id="prodtwoid" class="prodcls">
    <img src="images/zara/thumbnails/2.png" alt="ZARA"/>
    </div>

    <div id="prodthreeid" class="prodcls">
    <img src="images/puma/thumbnails/1.png" alt="PUMA"/>
    </div>

    <div id="prodfourid" class="prodcls">
    <img src="images/hermes/thumbnails/1.png" alt="HERMES"/>
    </div>

</div>

---

<曲奇>看一下：

可以考虑使用某种会话状态变量或cookie，但这是一个弱的解决方案。您的问题不是很清楚，最好是重新考虑页面的结构和/或此处假设MVC的视图模型？

JS+cookies可能会帮助您使用cookie。如果你想提供一个好的答案，你可以对任务进行评论，并就OP的确切需求提出其他问题，而不是在回答中提问。只是一些友好的建议。亲爱的greg，你编辑的代码首先隐藏滑块和.prodcls，因为我的prodoneid在.prodcls中，然后没有什么可点击的。这是你自己的问题代码-你写的。如果您想将HTML添加到问题中并描述您想要隐藏的内容，那么我们可以建议使用适当的jQuery来隐藏您想要的内容。@sajid-您想在HTML中隐藏什么？您希望什么是可单击的？.prdocls希望是可单击的，而隐藏.prodcls+。slidercls@sajid-幻灯片在哪里？我没有在你的HTML中看到它。

    <div id="prodoneid" class="prodcls"> <img src="images/zara/thumbnails/1.png" alt="ZARA"/> </div>

    <div id="prodtwoid" class="prodcls">
    <img src="images/zara/thumbnails/2.png" alt="ZARA"/>
    </div>

    <div id="prodthreeid" class="prodcls">
    <img src="images/puma/thumbnails/1.png" alt="PUMA"/>
    </div>

    <div id="prodfourid" class="prodcls">
    <img src="images/hermes/thumbnails/1.png" alt="HERMES"/>
    </div>

</div>