Question

我有一个基本的下拉选项列表-单击选项时，它将显示一个特定的div（现在我添加了要显示和隐藏的类）-我可以使用它，但是必须存储所选的选项，以便在页面上刷新该选项在用户更改它之前，它仍处于锁定状态。我可以使用一些cookie或其他东西吗？我对这个“像我5岁时一样解释;）”感到陌生，我非常感谢您的帮助。谢谢！

选择器：

    <li>
       <select id="song-gmt-selector">
                <option value="genres">Genres</option>
                <option value="moods">Moods</option>
                <option value="themes">Themes</option>
                <option value="instruments">Instruments</option>
            </select>
        </li>

我发现的jQuery

  $(document).ready(function(){

    $('#song-gmt-selector').on('change', function() {
        if ( this.value == 'genres')
        {
            $(".genres_s").addClass('show-gmt');
        }
        else
        {
            $(".genres_s").removeClass('show-gmt');
        }
        if ( this.value == 'moods')
        {
            $(".moods_s").addClass('show-gmt');
        }
        else
        {
            $(".moods_s").removeClass('show-gmt');
        }
        if ( this.value == 'themes')
        {
            $(".themes_s").addClass('show-gmt');
        }
        else
        {
            $(".themes_s").removeClass('show-gmt');
        }
        if ( this.value == 'themes')
        {
            $(".themes_s").addClass('show-gmt');
        }
        else
        {
            $(".themes_s").removeClass('show-gmt');
        }



    });
});

Answer 1

以这种方式尝试

$(document).ready(function () {
            var current = '';
            $('#song-gmt-selector').on('change', function () {
                current = $(this).val();
                console.log(current);
                $('.box').removeClass('show-gmt');
                $('.' + current + '_s').addClass('show-gmt');
                localStorage.setItem('current', current);
            });
            if (localStorage.getItem('current')) {
                $('#song-gmt-selector').val(localStorage.getItem('current'));
                $('.' + localStorage.getItem('current') + '_s').addClass('show-gmt');
            }
        });

HTML

<select id="song-gmt-selector">
    <option value="genres">Genres</option>
    <option value="moods">Moods</option>
    <option value="themes">Themes</option>
</select>

<div class="box genres_s">genres</div>
<div class="box moods_s">moods</div>
<div class="box themes_s">themes</div>

CSS

.box {
   display: none;
 }
.box.show-gmt {
   display: block;
}

如何选择div以显示并存储为cookie或localstorage？

1 个答案: