Question

我正在尝试转换localStorage存储的值，然后将其转换为类，以便我可以在DOM中对其进行操作。

我对javascript很新，所以请允许我解释一下：

我有一个包含多个div的html文件，而localStorage存储了最后一次点击的div类。

我希望我的脚本从localStorage调用存储的类，找到该类的div（使用jquery OR js，无关紧要），然后使用.css（）更改该div的背景颜色。我将能够做我需要做的那个逻辑，但我不能让它工作。

所以我要做的是$（'最后点击的div'）。css（{..操纵css ..}）;

这可能吗？

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>test</title>
    <script type="text/javascript">

    $(document).ready(function () {

        //always show the current div class
        $("b").html(localStorage.getItem("currentDiv"));


        //get the class of the div that's just been clicked
        $("div").click(function(){
            var currentClass = $(this).attr("class");
            localStorage.setItem("currentDiv", currentClass);
            $("b").html(localStorage.getItem("currentDiv"));
        });


        //show the div that was last clicked
        function currentStatus(){
            if (localStorage.getItem("currentDiv") === $(currentClass))
            {
                $(currentClass).show();
                $("b").html(localStorage.getItem("currentDiv"));
            }
        }

        //set a color for the recently clicked div dynamically, not by .click
        var highlightClass = localStorage.getItem("currentDiv");
        highlightClass.css({
            'background' : 'black'
        })

    });

    $('#localStorageTest').submit(function() {
        localStorage.clear();
    });


    </script>

    <style type="text/css">
    [class*="slide"]{
    display: inline-block;
    padding: 40px;
    background: #999;
    margin: 20px;
    }
    /*.slide1{
    display: block;
    }*/
    </style>

    </head>

    <body onLoad="currentStatus()">
        <div class="slide1">
            <h1>"A question would go here."</h1>
        </div>
        <div class="slide2">
            <h1>"A question would go here."</h1>
        </div>
        <div class="slide3">
            <h1>"A question would go here."</h1>
        </div>
        <div class="slide4">
            <h1>"A question would go here."</h1>
        </div>
        <div class="slide5">
            <h1>"A question would go here."</h1>
        </div>
        <div class="slide6">
            <h1>"A question would go here."</h1>
        </div>
        <div class="slide7">
            <h1>"A question would go here."</h1>
        </div>
        <b></b>
    </body>
    </html>

Answer 1

以下是如何使其工作，核心是：$（“。”+ currentDivClass）将字符串转换为类！

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>test</title>

    <style type="text/css">
    [class*="slide"]{
    display: inline-block;
    padding: 40px;
    background: #999;
    margin: 20px;
    }
    /*.slide1{
    display: block;
    }*/
    </style>

    </head>

    <body>
        <div class="slide1">
            <h1>"1 A question would go here."</h1>
        </div>
        <div class="slide2">
            <h1>"2 A question would go here."</h1>
        </div>
        <div class="slide3">
            <h1>"3 A question would go here."</h1>
        </div>
        <div class="slide4">
            <h1>"4 A question would go here."</h1>
        </div>
        <div class="slide5">
            <h1>"5 A question would go here."</h1>
        </div>
        <div class="slide6">
            <h1>"6 A question would go here."</h1>
        </div>
        <div class="slide7">
            <h1>"7 A question would go here."</h1>
        </div>
        <b></b>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script type="text/javascript">

    $(document).ready(function () {

        //always show the current div class
        $("b").html(localStorage.getItem("currentDiv"));


        //get the class of the div that's just been clicked
        $("div").click(function(){
            var currentClass = $(this).attr("class");
            localStorage.setItem("currentDiv", currentClass);
            $("b").html(localStorage.getItem("currentDiv"));
        });


        //convert the string of the last clicked div into a class and then work your magic
        var currentDivClass = localStorage.getItem("currentDiv");
        $("."+currentDivClass).css({
            'background' : 'red'
        });


    });

    $('#localStorageTest').submit(function() {
        localStorage.clear();
    });


    </script>

    </body>
    </html>

使用js和localStorage查找课程

1 个答案: