Question

我有一个显示不同信息的div列表。使用下拉菜单，您可以选择要显示的div。我有这个工作，但无法显示默认的div加载。另外，我使用cookie来存储div选择

我尝试将默认的Map<String, CompletableFuture<Response>> map = … CompletableFuture<Map<String, Response>> f = CompletableFuture.allOf(map.values().toArray(new CompletableFuture[0])) .thenApply(_void -> map.entrySet().stream() .collect(Collectors.toMap(Map.Entry::getKey, e -> e.getValue().join())));添加到div中，但是即使选择了其他div也会始终显示

选择器代码：

show-gmt

div代码：

<ul>
    <li>
        <div class="gmt-select">
            <select id="song-gmt-selector" class="tooltip" title="Toggle track 
                  info">
                <option value="genres" title="Show Track 
                  Genres">Genre</option>
                <option value="moods" title="Show Track Moods">Mood</option>
                <option value="themes" title="Show Track 
                   Themes">Theme</option>
                <option value="instruments" title="Show Track 
                   Instruments">Instru</option>
                <option value="info" title="Show Track 
                  Description">Desc</option>
            </select>
        </div>
    </li>
</ul>

Jquery代码：

<div class="box genres_s"></div>
<div class="box moods_s"></div>
<div class="box desc_s"></div>

Answer 1

根据我的理解，您正在寻找类似的东西吗？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .box {
            display: none;
        }

        .show-gmt {
            display: block !important;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="gmt-select">
                <select id="song-gmt-selector" class="tooltip" title="Toggle track 
                      info">
                    <option value="genres" title="Show Track 
                      Genres">Genre</option>
                    <option value="moods" title="Show Track Moods">Mood</option>
                    <option value="themes" title="Show Track 
                       Themes">Theme</option>
                    <option value="instruments" title="Show Track 
                       Instruments">Instru</option>
                    <option value="info" title="Show Track 
                      Description">Desc</option>
                </select>
            </div>
        </li>
    </ul>
    <div class="box genres_s">genres_s</div>
    <div class="box moods_s">moods_s</div>
    <div class="box desc_s">desc_s</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
    crossorigin="anonymous"></script>
<script>
    $(document).ready(function () {
        var current = '';
        if (!(localStorage.getItem('current'))) {
            current = $('#song-gmt-selector').val();
            $('.box').removeClass('show-gmt');
            $('.' + current + '_s').addClass('show-gmt');
            localStorage.setItem('current', current);
        }
        $('#song-gmt-selector').on('change', function () {
            current = $(this).val();

            $('.box').removeClass('show-gmt');
            $('.' + current + '_s').addClass('show-gmt');
            localStorage.setItem('current', current);
            console.log(localStorage.getItem('current'));
        });
        if (localStorage.getItem('current')) {
            $('#song-gmt-selector').val(localStorage.getItem('current'));
            $('.' + localStorage.getItem('current') + '_s').addClass('show-gmt');
        }
    });
</script>

</html>

我希望这对您有帮助

显示默认的div，直到用户通过选择器更改

1 个答案: