如何在语言切换器中使用 <div> 列表而不是 <select> 下拉列表？答案

【问题标题】：How can I use <div> list instead of <select> dropdown for a languages switcher?如何在语言切换器中使用 <div> 列表而不是 <select> 下拉列表？
【发布时间】：2020-11-15 04:33:04
【问题描述】：

我想使用<div> 而不是<select> 来列出语言切换器的选项。但问题是我不知道如何将值传递给 jQuery 函数。

这是我的<select> html 代码

<select id="langSelector">
<option>lang</option>
<option value="de">de</option>
<option value="jp">jp</option>
</select>

我想改用什么

                    <div id="langSelector" class="dropdown-menu position-absolute" aria-labelledby="language-dropdown">
                        <a value="de" class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/de.png" class="flag-width" alt="flag"> <span class="align-self-center">&nbsp;German</span></a>
                        <a value="jp" class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/jp.png" class="flag-width" alt="flag"> <span class="align-self-center">&nbsp;Japanese</span></a>
                    </div>

我的 Jquery 代码

<script type="text/javascript">
    var l = new LanguageSelector();
    $(function(ready){
     $("#langSelector").change(function() {
         var s = $(this).children("option:selected").val();
         l.setLang(s);
         window.location = '1.html';
     });
     });
    l.parse();
</script>

我尝试将 value"" 更改为 data-value"" 和 option:selected 为 a:selected > span:selected > a.selected 但似乎没有任何效果

【问题讨论】：

你为什么不喜欢<select>和<option>？
嘿@sergeykuznetsov 这是由于与<select> 和<option> 相关的UI 和限制这是我的样子link

标签： javascript php html jquery sass

【解决方案1】：

<div id="langSelector" class="dropdown-menu position-absolute" aria-labelledby="language-dropdown">
    <a data-lang="de" class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/de.png" class="flag-width" alt="flag"> <span class="align-self-center">&nbsp;German</span></a>
    <a data-lang="jp" class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/jp.png" class="flag-width" alt="flag"> <span class="align-self-center">&nbsp;Japanese</span></a>
</div>

<script>
    var languageSelector = new LanguageSelector();
    $('[data-lang]').on('click', function(){
        var selectedLang = $(this).data('lang');
        languageSelector.setLang(selectedLang);
        
        // DO THE REST OF CODE HERE
        
    });
</script>

因此，将数据存储在 HTML5 数据属性中。由于我假设您创建了一个虚假的 downdown 以更好地控制用户代理样式（

$('a[data-lang]')...

或

$('#langSelector > a[data-lang]')....

然后使用点击监听器返回 $(this) 这将是当前点击的链接并访问它的 data('lang') 属性并将其传递给 lang

【讨论】：