0

这是一个与此处类似的问题：为什么我的 cookie 设置没有被应用？

我知道这很笨拙，但我还没有找到另一种方法来实现这一点 - 我想读取一个 cookie，并基于 cookie val（“true”或“false”）打开或关闭选项卡的可见性，使用Razor/C#、HTML 和 jQuery 的组合。

我想出的是使用 Razor 代码将 div 的“title”属性基于该属性，然后在 jQuery 中读取该属性 val 以设置可见性 val，如下所示：

剃刀：

string selectTwitterCookie = Request.Cookies["selectTwitter"].Value;

HTML：

<div id="duckbilledPlatypusTab-Twitter" title=@selectTwitterCookie>

jQuery：

if ($("#duckbilledPlatypusTab-Twitter").title == "true") {
    $("#duckbilledPlatypusTab-Twitter").visible("visible");
} else {
    $("#duckbilledPlatypusTab-Twitter").visible("not visible");
}

...当然，“不可见”并不是我真正需要的。我宁愿更直接地对其进行编码，例如：

($("#duckbilledPlatypusTab-Twitter").title == "true") ?  $("#duckbilledPlatypusTab-Twitter").visible("visible") : $("#duckbilledPlatypusTab-Twitter").visible("invisible");

有谁知道如何做到这一点？

更新

好吧，另一个奇怪的情况。查看 CDT 中的值，我发现所有选项卡都具有相同的类（“ui-tabs-anchor”）：

<a href="#duckbilledPlatypusTab-Twitter" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Twitterpated</a>
<a href="#duckbilledPlatypusTab-Bing" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Bingo</a>

...所以他们的 html 似乎没有受到我在代码中添加的 class="display-@WhateverCookie" 的影响：

<div id="duckbilledPlatypusTab-Twitter" class="display-@TwitterCookie">

...然而，那些添加了该类的人不会在他们的 iframe 中显示任何内容 - 除了 Twitter；Twitter 运行良好……所以，它又回到了编码板*，尽管有时它感觉更像是一个占卜板或草稿板。

  • 伴着 Merle Haggard 的“Back to the Barrooms”的旋律演唱。

更新 2

将其更改为此允许 iframe 再次工作：

class="display-"+@BingCookie

（而不是 class="display-@BingCookie"）

但有趣的是——CDT 似乎仍然没有意识到动态创建的类。

更新 3

奇怪......即使在为 html 添加标题之后：

<div id="duckbilledPlatypusTab-BingSearch" style="min-height: 50vh" title="Bla" class="display-"+@BingCookie>

...这到 jQuery 就绪方法的结尾：

if ($("#duckbilledPlatypusTab-Bing").attr('title') == "true") {
    $("#duckbilledPlatypusTab-Bing").css('display', 'block');
} else {
    $("#duckbilledPlatypusTab-Bing").css('display', 'none');
}

...标签仍然可见。

CDT 将元素视为：

<div id="dynaMashTab-Bingo" style="min-height: 50vh;" title="bla" class="display- ui-tabs-panel ui-widget-content ui-corner-bottom" +@bingocookie="" aria-labelledby="ui-id-4" role="tabpanel" aria-expanded="true" aria-hidden="false"></div>

IOW，“类”声明看起来完全古怪......

4

2 回答 2

2

.css()在jQuery中使用method并display为元素设置，你必须得到一个带有.attr()method的属性：

if ($("#duckbilledPlatypusTab-Twitter").attr('title') == "true") {
    $("#duckbilledPlatypusTab-Twitter").css('display', 'block');
} else {
    $("#duckbilledPlatypusTab-Twitter").css('display', 'none');
}

参考：

小费

但是，这里实际上不需要使用 jQuery，您可以使用模板引擎 (Razor) 来完成。像这样的东西：

<div id="duckbilledPlatypusTab-Twitter" class="display-@selectTwitterCookie">

在您的 CSS 中，您将拥有：

.display-true { display: block; }
.display-false { display: none; }
于 2013-05-30T05:12:09.220 回答
1

  • 解决方案1：

    if ($("#duckbilledPlatypusTab-Twitter").attr('title') === "true") {
    $("#duckbilledPlatypusTab-Twitter").show();
} else {
    $("#duckbilledPlatypusTab-Twitter").hide();
}

  • 解决方案2：

    if ($("#duckbilledPlatypusTab-Twitter").attr('title') === "true") {
    // Can use hidden OR display-none based on your requirement
    $("#duckbilledPlatypusTab-Twitter").removeClass("hidden");
} else {
    // Can use hidden OR display-none based on your requirement
    $("#duckbilledPlatypusTab-Twitter").addClass("hidden");
}

    CSS：

    .hidden {visibility: hidden !important;} 
.display-none {display: none !important;}

注意：希望您将其作为 $(document).ready() 的一部分或在 selectTwitterCookie 的值可用且 DOM 已准备好的其他地方执行此操作。

于 2013-05-30T07:39:13.987 回答