Question

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

我想看看是否可以将此值存储在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＆＃39;要在下一页显示：

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

变量subNavLength是全局的，并通过这些不同的功能进行更新。

我意识到我发布了大量的jquery，而且我真的不知道如何（或者是否）有办法将其转换为coldfusion的后端解决方案。我的想法是，我可以在包含在coldfusion中的subNav元素上切换一个类，如下所示：

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

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

Answer 1

说实话，你有几个选择，但没有必要让服务器端参与其中。它甚至没有益处。

其中一条，也许是我采取的路线，是使用javascript cookie或localStorage来存储设置，以及维护干净网址的方式。

另一种方法是使用类似这样的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来获得更清晰的结果，因为它不会改变网址。单击设置按钮后，重新运行脚本以查看更改。（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变量

1 个答案: