Question

我希望用户从下拉框中选择一个选项，并将所选选项的值存储为cookie，然后将该值设置为页面背景或图库背景，或两者，取决于用户选择的按钮。但是，这似乎不起作用。

$(document).ready(function() {

    $('#set_cookie').click(function() {

        var color = $('#set_cookie').val();

        $.cookie('test_cookie', color);

        $('#set_page').click(function() {
            $('body').css('background', color);
        });

        $('#set_gallery').click(function() {
            $('#gallery').css('background', color);
        });

        $('#set_both').click(function() {
            $('body').css('background', color);
            $('#gallery').css('background', color);
        }); 
    });
});

包含的脚本：

<script type="text/javascript" src="javascript/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="javascript/scripts.js"></script>
        <script type="text/javascript" src="javascript/shadowbox-3.0.3/shadowbox.js"></script>
        <script type="text/javascript" src="javascript/jquery.cookie.js"></script>

HTML：

<body>
        <div id="wrap">
            <div id="header">
                <img src="media/header.png" alt="Community Header" />
            </div>

            <p>Please select a background color for either the page's background, the gallery's background, or both.</p>

            <select id="set_cookie">
                <option value="black">Black</option>
                <option value="blue">Blue</option>
                <option value="brown">Brown</option>
                <option value="darkblue">Dark Blue</option>
                <option value="darkbrown">Dark Brown</option>
                <option value="darkgreen">Dark Green</option>
                <option value="darkred">Dark Red</option>
                <option value="fuchsia">Fuchsia</option>
                <option value="green">Green</option>
                <option value="grey">Grey</option>
                <option value="#d3d3d3">Light Grey</option>
                <option value="#32cd32">Lime Green</option>
                <option value="#f8b040">Macaroni</option>
                <option value="#ff7300">Orange</option>
                <option value="pink">Pink</option>
                <option value="purple">Purple</option>
                <option value="red">Red</option>
                <option value="#0fcce0">Turquoise</option>
                <option value="white">White</option>
                <option value="yellow">Yellow</option>
            </select>

            <input type="button" id="set_page" value="Page's Background" /><input type="button" id="set_gallery" value="Gallery's Background" /><input type="button" id="set_both" value="Both" />

            <p>Community is an American television comedy series created by Dan Harmon that airs on NBC. The series is about a group of students at a community college in the fictional locale of Greendale, Colorado. The series heavily uses meta-humor and pop culture references, often parodying film and television clichés and tropes. The series premiered Thursday, September 17, 2009, and airs in the 8:00 pm ET time slot. It previously aired in the 9:30 pm ET time slot, beginning with its premiere, but later relocated with its fourth episode. On March 17, 2011, NBC renewed Community for a trd season, wch premiered on September 22, 2011.</p>

            <div id="gallery">
                <table>
                    <tr><td><a href="media/community/fullsize/abed_annie_troy.jpg" rel="shadowbox[Gallery]" title="Abed, Annie and Troy"><img src="media/community/thumbnails/abed_annie_troy.jpg" alt="Abed, Annie and Troy" /></a></td><td><a href="media/community/fullsize/annie_paintball.jpg" rel="shadowbox[Gallery]" title="Annie playing paintball"><img src="media/community/thumbnails/annie_paintball.jpg" alt="Annie during the first paintball episode" /></a></td><td><a href="media/community/fullsize/annie.jpg" rel="shadowbox[Gallery]" title="Annie's Halloween costume"><img src="media/community/thumbnails/annie.jpg" alt="Annie as a skeleton" /></a></td><td><a href="media/community/fullsize/britta_dinosaur.jpg" rel="shadowbox[Gallery]" title="Jeff's and Britta's Halloween costumes"><img src="media/community/thumbnails/britta_dinosaur.jpg" alt="Britta's and Jeff's Halloween costumes" /></a></td></tr>
                    <tr><td><a href="media/community/fullsize/cast_cafeteria.jpg" rel="shadowbox[Gallery]" title="In the cafeteria"><img src="media/community/thumbnails/cast_cafeteria.jpg" alt="The cast in the cafeteria" /></a></td><td><a href="media/community/fullsize/cast_class.jpg" rel="shadowbox[Gallery]" title="In the classroom"><img src="media/community/thumbnails/cast_class.jpg" alt="The cast in a classroom" /></a></td><td><a href="media/community/fullsize/cast_cloud.jpg" rel="shadowbox[Gallery]" title="Tnking"><img src="media/community/thumbnails/cast_cloud.jpg" alt="The cast tnking" /></a></td><td><a href="media/community/fullsize/cast_mural.jpg" rel="shadowbox[Gallery]" title="In front of a colorful chalkboard"><img src="media/community/thumbnails/cast_mural.jpg" alt="Cast in front of a chalkboard" /></a></td></tr>
                    <tr><td><a href="media/community/fullsize/cast_study_room.jpg" rel="shadowbox[Gallery]" title="Hanging in the study room"><img src="media/community/thumbnails/cast_study_room.jpg" alt="The cast in their study room" /></a></td><td><a href="media/community/fullsize/cast.jpg" rel="shadowbox[Gallery]" title="In the library"><img src="media/community/thumbnails/cast.jpg" alt="The cast" /></a></td><td><a href="media/community/fullsize/christmas_episode.jpg" rel="shadowbox[Gallery]" title="Transformed into Christmasy claymation characters"><img src="media/community/thumbnails/christmas_episode.jpg" alt="Claymation Christmas episode" /></a></td><td><a href="media/community/fullsize/pierce.jpg" rel="shadowbox[Gallery]" title="Pierce hears sometng!"><img src="media/community/thumbnails/pierce.jpg" alt="Pierce with other students" /></a></td></tr>
                    <tr><td><a href="media/community/fullsize/season_3.jpg" rel="shadowbox[Gallery]" title="The introduction to season 3"><img src="media/community/thumbnails/season_3.jpg" alt="Intro to season three" /></a></td><td><a href="media/community/fullsize/show_poster.jpg" rel="shadowbox[Gallery]" title="The classic Community poster"><img src="media/community/thumbnails/show_poster.jpg" alt="Poster for the show" /></a></td><td><a href="media/community/fullsize/troy_and_abed.jpg" rel="shadowbox[Gallery]" title="Troy and Abed In the Morning!"><img src="media/community/thumbnails/troy_and_abed.jpg" alt="Troy and Abed In The Morning" /></a></td><td><a href="media/community/fullsize/trio_paintball.jpg" rel="shadowbox[Gallery]" title="After an intense paintball match"><img src="media/community/thumbnails/trio_paintball.jpg" alt="Troy, Annie and Abed after paintball" /></a></td></tr>
                </table>
            </div>
        </div>
    </body>

Answer 1

您是否100％肯定加载了Cookie插件脚本？因为没有为$.cookie(...)打电话，一切正常。

请参阅：http://jsfiddle.net/hu6DP/

Answer 2

我觉得有点奇怪，你是在set_cookie的click处理程序中为set_page定义了click处理程序。此外，您试图引用该处理程序中的“颜色”变量。在任何情况下，我都会尝试将其更改为：

$(document).ready(function() {

    $('#set_cookie').click(function() {

        var color = $('#set_cookie').val();

        $.cookie('test_cookie', color);
    });


        $('#set_page').click(function() {
            if ($.cookie('test_cookie')) $('body').css('background-color',  $.cookie('test_cookie'));
        });

        $('#set_gallery').click(function() {
            if ($.cookie('test_cookie')) $('#gallery').css('background-color', $.cookie('test_cookie'));
        });

        $('#set_both').click(function() {
            if ($.cookie('test_cookie')) $('body').css('background-color', $.cookie('test_cookie'));
            if ($.cookie('test_cookie')) $('#gallery').css('background-color', $.cookie('test_cookie'));
        });

}）;

已更新以修复对background-color的引用

我的jQuery有什么问题？试图让它根据用户选择的内容改变背景颜色？

2 个答案: