0

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

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

我有一个包含多个 div 的 html 文件，并且 localStorage 存储了上次单击的 div 的类。

例如，我希望我的脚本从 localStorage 调用存储的类，找到具有该类的 div（使用 jquery OR js，没关系），然后使用 .css() 更改该 div 的背景颜色。我将能够使用该逻辑做我需要做的事情，但我无法让它发挥作用。

所以我想做的是 $('最后点击的 div').css({..manipulate the 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>
4

1 回答 1

0

下面是如何使它工作，核心是： $("."+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>
于 2013-02-12T17:32:35.580 回答