javascript - 如何以编程方式单击下拉列表中的 li

Question

我有一个自定义下拉菜单，点击下拉菜单中的项目，我正在更改顶部选择文本。但是当用户前进到下一步并返回到当前步骤时，我试图存储在本地存储中，并在本地存储中使用该 id ..我想以编程方式单击 li。 click() 函数为何不起作用。

<div class="btn-group custom-drop" style="display:inline-block;">
    <button type="button" class="btn btn-default dropdown-toggle drop-width" data-toggle="dropdown"><div class="dropdownValue" style="color: rgba(51, 51, 51, 0.56);">Choose An Occasion </div><span class="caret"></span></button>

    <ul class="dropdown-menu scrollable-menu" role="menu">
        <li class="bla" id="1"><a icon="birthdayIcon" href="#">Birthday</a></li>
        <li class="bla" id="2"><a icon="weddingIcon" href="#">Wedding</a></li>
        <li class='bla' id="3"><a icon="anniversaryIcon" href="#">Anniversary</a></li>
        <li class='bla' id="4"><a icon="farewellIcon" href="#">Farewell</a></li>
        <li class='bla' id="5"><a icon="thanksGivingIcon" href="#">Thanks giving</a></li>
        <li class='bla' id="6"><a icon="graduationIcon" href="#">Graduation Day</a></li>
        <li class='bla' id="7"><a icon="newYearIcon" href="#">New Year’s Day – January 1</a></li>
        <li class='bla' id="8"><a icon="valentineIcon" href="#">Valentine’s Day – February 14</a></li>
        <li class='bla' id="9"><a icon="womenIcon" href="#">International Women’s Day – March 8</a></li>
        <li class='bla' id="10"><a icon="easterIcon" href="#">Easter – March 27</a></li>
        <li class='bla' id="11"><a icon="motherIcon" href="#">Mother’s Day – May 8</a></li>
        <li class='bla' id="12"><a icon="fatherIcon" href="#">Father’s Day - June 19</a></li>
        <li class='bla' id="13"><a icon="doctorIcon" href="#">Doctor’s Day – July 1</a></li>
        <li class='bla' id="14"><a icon="parentIcon" href="#">Parent’s Day – July 24</a></li>
        <li class='bla' id="15"><a icon="friendIcon" href="#">Friendship Day – August 7</a></li>
        <li class='bla' id="16"><a icon="sdIcon" href="#">Son and Daughter Day – August 11</a></li>
        <li class='bla' id="17"><a icon="teacherIcon" href="#">Teachers Day – September 5</a></li>
        <li class='bla' id="18"><a icon="dussehraIcon" href="#">Dussehra – October 11</a></li>
        <li class='bla' id="19"><a icon="bossIcon" href="#">Boss’s Day – October 17</a></li>
        <li class='bla' id="20"><a icon="diwaliIcon" href="#">Diwali  - October 30</a></li>
        <li class='bla' id="21"><a icon="halloweenIcon" href="#">Halloween – October 31</a></li>
        <li class='bla' id="22"><a icon="childrenIcon" href="#">Children’s Day – November 14</a></li>
        <li class='bla' id="23"><a icon="christmasIcon" href="#">Christmas – December 25</a></li>
        <li class='bla' id="24"><a icon="shijokesIcon" href="#">Just get a Shijokes</a></li>
    </ul>
</div>

这是我的JS

$(document).ready(function(){

    //persistence for the choose ocdasion
    if(localStorage.getItem('occasion_id')! == 'null'){
        var id_previousclick = localStorage.getItem('occasion_id');
        console.log(id_previousclick);
        $('#'+id_previousclick).click();
    }

    $('.dropdown-menu li').click(function(event){
            $('.dropdownValue').text(event.srcElement.text);
            var iconHolder = $('.iconHolder').removeClass();
            iconHolder.addClass('iconHolder '+ $(event.srcElement).attr('icon'));
            //sending the dropdown id 
            var send_occ = event.srcElement.parentElement.id;
            console.log(send_occ);
            $('.send-occ').val(send_occ);
            localStorage.setItem("occasion_id",parseInt(send_occ));
      });
});

我的观察

$('#2').click() 将不起作用，这意味着我猜 click 不适用于 li。

我遇到的问题

我目前在 JS 中的 if 条件不允许单击的项目显示在下拉列表的顶部。删除 if 条件使下拉菜单可点击并且顶部元素发生变化。

Answer 1

好的，这些是我目前注意到的错误。

1. 这里有一个错字 if(localStorage.getItem('occasion_id')!== '空')。将其修复为 !==。
2. event.srcElement 未定义。我相信你想做 $(this)。所以它会是 $(this).text() 来获取被点击的 li 的文本。
3. 与第二个相同，li 没有icon 属性。它的子项是 a。所以它将是 $(this).find('a').attr('icon')
4. 与第二个相同，event.srcElement.parentElement.id 到 this.parentElement.id。我相信您想选择 li 的父级。但在这种情况下，它将始终返回 null，除非您定义容器 ul 的 id。
5. 然后您可以愉快地调用$('#2').click() 或使用trigger。

不过，我还是没有注意到.iconHolder是什么。因此，当您将类分配给 iconHolder 时，它不会在此答案中起作用。

最后，它应该是这样的

$(function() {
  if (localStorage.getItem('occasion_id') !== 'null') {
    var id_previousclick = localStorage.getItem('occasion_id');
    console.log(id_previousclick);
    $('#' + id_previousclick).click();
  }

  $('.dropdown-menu li').click(function(event) {
    $('.dropdownValue').text($(this).text());
    var iconHolder = $('.iconHolder').removeClass();
    iconHolder.addClass('iconHolder ' + $(this).find('a').attr('icon'));

    //sending the dropdown id 
    var send_occ = this.parentElement.id;
    console.log(send_occ);
    $('.send-occ').val(send_occ);
    localStorage.setItem("occasion_id", parseInt(send_occ));
  });

  $("#2").click();
})

还有 fiddle