Question

这是应该发生的事情。每次用户单击按钮时，div的文本都会更改。我已经完美地工作了（感谢此前的一个问题）。每次单击都会生成一个cookie，其中包含随后出现在div中的随机文本。有5个div（每个cookie一个）被填满，然后第一个被覆盖（在第6次点击）。就像我说的，这是完美的。

但是，当有人第一次点击时，第一个div正确显示文本，但其他4个div中出现“undefined”（因为其他cookie尚未定义）。我想这是基于代码的预期。但是，我喜欢它，如果这些div的内容是“未定义的”，div仍然是隐藏的。

这是div的代码：

<div id="textDiv" class="div"></div>
<div id="textDiv1" class="div1"></div>
<div id="textDiv2" class="div2"></div>
<div id="textDiv3" class="div3"></div>
<div id="textDiv4" class="div4"></div>

这是填写每个div的代码（但重复5次以覆盖所有5个cookie和5个div ...省去了所有空间：

<script>
$(document).ready(function(){
$("form").click(function () {
var div = document.getElementById("textDiv");
div.textContent = $.cookie('cookie_1');
var text = div.textContent;
})
}); 
</script>

<script>
$(document).ready(function(){
$("form").click(function () {
var div = document.getElementById("textDiv1");
div.textContent = $.cookie('cookie_2');
var text = div.textContent;
})
}); 
</script>

ETC...

就像我说的，这样可以正常工作，但是在完全设置cookie之前，div显示“未定义”。我试过这个：

<script>
$(document).ready(function(){
$("form").click(function () {
var $cook1 = $.cookie('cookie_1');
var $cook2 = $.cookie('cookie_2');
var $cook3 = $.cookie('cookie_3');
var $cook4 = $.cookie('cookie_4');
var $cook0 = $.cookie('cookie_0');
})
}); 
</script>

<script>
$(document).ready(function(){
$("form").click(function () {
if(typeof cook2 == 'undefined'){
    $('textDiv1').hide();
    }
else {
     var div = document.getElementById("textDiv1");
div.textContent = $.cookie('cookie_2');
var text = div.textContent; 
}
})
}); 
</script>

ETC...

当cookie（以及div中的文本）未定义时，这会隐藏div。唯一的问题是，一旦定义了cookie（在另一次点击表单之后），它就不会取消隐藏。它似乎没有“重新检查”它是否被定义。这对我来说很奇怪，因为它似乎会在每次点击时检查cookie，因为div中的文本随着cookie的变化而变化。

知道怎么做吗？

（是的，我假设我的代码太复杂了，有很多方法可以简化，但我是新手，所以我会接受你的所有建议。）

（注意：我遗漏了生成cookie的代码，工作正常，我认为不适用于答案。）

谢谢！

Answer 1

这更简单，应该有效：

div.textContent = $.cookie('cookie_1') || "";

另外，我看到你的代码中有很多重复，你可以像这样简化它：

<script>
$(document).ready(function(){

    function fillDiv(divId, cookieId) {
        var div = document.getElementById(divId);
        div.textContent = $.cookie(cookieId) || "";
    }

    $("form").click(function () {
        fillDiv("textDiv", "cookie_1");
        fillDiv("textDiv1", "cookie_2");
        // etc.
    })
}); 
</script>

jQuery检查每次点击后是否“未定义”

1 个答案: