转换 jquery/js 函数以将页面之间的变量传递给 ColdFusion 变量

Question

我有一些 jquery 检查特定元素在页面上是否可见并传递要附加到 url 的参数，因此该元素可以 shown/hidden下一页。

我想看看是否可以将这个值存储在一个 coldfusion 变量中，然后通过导航传递它，因为这对我来说似乎是一种更可靠的方法。

这是我的基本 html：

<nav>
            <ul id="mainNav" class="clearfix">
                <li><a href="/">Main</a></li>
                <li><a href="#" class="<cfif VARIABLES.primarydir EQ 'work'>clicked</cfif>">Work</a></li>
                <li><a href="/about"  class="<cfif VARIABLES.primarydir EQ 'about'>clicked</cfif>">About</a></li>
                <li><a href="/news" class="<cfif VARIABLES.primarydir EQ 'news'>clicked</cfif>">News </a></li>
                <li><a href="/tumblr.com" target="_blank">Blog</a></li>
            </ul>
            <ul id="subNav">
                <li><a href="/work/effort" class="<cfif VARIABLES.primarydir EQ 'work' and VARIABLES.secondarydir EQ 'effort'>clicked</cfif>">Effort, We Cried!</a></li>
                <li><a href="/work/why" class="<cfif VARIABLES.primarydir EQ 'work' and VARIABLES.secondarydir EQ 'why'>clicked</cfif>">Why Do We Do This</a></li>
                <li><a href="/work/guests" class="<cfif VARIABLES.primarydir EQ 'work' and VARIABLES.secondarydir EQ 'guests'>clicked</cfif>">Guests &amp; Hosts</a></li>
                <li><a href="/work/prettygirls" class="<cfif VARIABLES.primarydir EQ 'work' and VARIABLES.secondarydir EQ 'prettygirls'>clicked</cfif>">Pretty Girls Doing Horrid Things</a></li>
            </ul>
</nav>

#subNav在css中默认设置为隐藏。

我想有一些基本的 jquery 来切换 subNav 的可见性：

    var toggleSubNav = (function(){
        trigger.on('click',function(){
            subNav.toggleClass('visible', function(){
                subNavLength = subNav.is(':visible');
            });
            return false;
        });
    }());

然后是第二个函数，它检查 subNav 的可见性并附加 url:

merge.on('click',function(){
            var url = $(this).attr('href');
            subNavLength = subNav.is(':visible');
            if(subNavLength){
                window.location = url + '?subnav=true';
            }else{
                window.location = url;
            }
            return false;
        });

最后一个函数检查 url 的 '?subnav=true' 内容以在下一页显示：

var subNavProp = (function(){
        if(href.indexOf('?subnav=true') > 0){
            subNav.addClass('visible');
        }else{
            subNav.removeClass('visible');
        }
    }());

变量 subNavLength 是全局变量，通过这些不同的函数进行更新。

我意识到我发布了很多 jquery 并且我真的不知道如何（或是否）有办法将其转换为冷融合的后端解决方案。我的想法是我可以在 subNav 元素上切换一个 class，如果是这样的话：

<ul id="subNav" class="<cfif var IS true">className</cfif>">

但我想知道这是否仍然需要某种前端解决方案。或者即使有另一种更好的方法来做到这一点？

Answer 1

老实说，您有几个选择，但没有必要让服务器端参与其中。连好处都没有。

一种方法，也可能是我要采取的方法，是使用 javascript cookie 或 localStorage 来存储设置，这样可以保持干净的 url。

另一条路线正在使用 jQuery 类似的东西。我正在使用复选框来切换添加，但它可以是任何变量，例如您的 subNavLength

我设计这个示例来影响以 / 开头的网址，因此 # 网址和外部网址是安全的。

演示：JSFiddle

$(document).ready(function () {
    $(document).on("click","a",function(e) {
        // This is just to demonstrate the change without trying to leave
        // JSFiddle, you can remove this whole function (a.click)
        alert($(this).attr("href"));
        e.preventDefault();
    });
    $(document).on("change","#navChanger",function(e) {
        $("a").each(function () {
            if($(this).attr("href").charAt(0) == "/") {
                if(document.getElementById("navChanger").checked) {
                    if ($(this).attr("href").split("?").length > 1) {
                        $(this).attr("href",$(this).attr("href") + "&subnav=true");
                    } else {
                        $(this).attr("href",$(this).attr("href") + "?subnav=true");
                    }
                } else {
                    $(this).attr("href",$(this).attr("href").replace(/.subnav=true$/i,"g"));
                }
            }
        })
    });
});

或者，您可以通过以下方式使用 localStorage 获得更清晰的结果，因为它不会更改 url。单击设置按钮后重新运行脚本以查看更改。 (demo)

var defaultOptions = {NavDisplay: true};
var options;
$(document).ready(function () {
    options = (JSON.parse(localStorage.getItem("options"))||defaultOptions)
    alert("NavDisplay set to: " + options.NavDisplay)

    $(document).on("click", '#sFalse', function(e) {
        options.NavDisplay = false;
        localStorage.setItem("options", JSON.stringify(options))
    });

    $(document).on("click", '#sTrue', function(e) {
        options.NavDisplay = true;
        localStorage.setItem("options", JSON.stringify(options))
    });
});

转换 jquery/js 函数以将页面之间的变量传递给 ColdFusion 变量

Convert jquery/js function to pass variable between pages to a ColdFusion variable

javascript

variables

coldfusion

jquery