更新 jquery 后脚本不起作用

Question

有一个显示出版物存档的脚本。最初，显示年份列表。单击年份会显示问题列表。当您单击该问题时，它会加载。

最初会显示所有年份。多年来的问题到处都隐藏，不显示，点击后，转换为显示继承。

应该是这样的：

<ul>
    <li class="arrow">▲</li>
    <li class="journals">
        <ul class="ye">
            <li class="year">2019</li>
            <ul class="in_nums 2019" style="display: none;">
                <li data-issue="7633">№1(67)</li>
            </ul>
            <li class="year">2018</li>
            <ul class="in_nums 2018" style="display: none;">
                <li data-issue="6998">№1(63)</li>
                <li data-issue="7163">№2(64)</li>
                <li data-issue="7320">№3(65)</li>
                <li data-issue="7474">№4(66)</li>
            </ul>
        </ul>
    </li>
    <li class="arrow">▼</li>

从1.7.2版本升级到3.3.1后，以下代码无法正常工作：

$(document).ready(function(){
    $('li.year').toggle(function(){
        $('.in_nums').css('display','none')
        var y = $(this).text()
        $('.'+y).css('display','inherit')
    },
    function(){
        var y = $(this).text()
        $('.'+y).css('display','none')
    })
    $('.in_nums li').click(function(){
        $('#fresh').html('<img src="images/30.gif"/>');
        $.post(location.href,{'art_id':$(this).data('issue')},function(data){
            var result = $.parseJSON(data);
            var fresh = '<div class="lastjor">[[%babel.archive_[[++cultureKey]]]]</div>'
            $('#fresh').html(fresh+result.output)
            $('#latest').html(result.current)
        })
    })
    $.post(location.href,{'art_id':[[!getLastIssueID]]},function(data){
        var result = $.parseJSON(data);
        var fresh = '<div class="lastjor">[[%babel.lastjor_[[++cultureKey]]]]</div>'
        $('#fresh').html(fresh+result.output)
        $('#latest').html(result.current)
    })
})

它在出版年份中添加了无显示：

<ul>
    <li class="arrow">▲</li>
    <li class="journals">
        <ul class="ye">
            <li class="year" style="display: none;">2019</li>
            <ul class="in_nums 2019" style="display: none;">
                <li data-issue="7633">№1(67)</li>
            </ul>
            <li class="year" style="display: none;">2018</li>
            <ul class="in_nums 2018" style="display: none;">
                <li data-issue="6998">№1(63)</li>
                <li data-issue="7163">№2(64)</li>
                <li data-issue="7320">№3(65)</li>
                <li data-issue="7474">№4(66)</li>
            </ul>
        </ul>
    </li>
    <li class="arrow">▼</li>

jQuery 语法有什么变化或者可能是什么问题？

Answer 1

您传递给.toggle() 的参数对应于removed from jQuery in version 1.9 的使用，因此这些函数不再对应于点击处理程序。相反，对toggle 的调用将隐藏选定的元素，然后执行作为第二个参数传递的函数。

要在您的页面上获得与以前版本 1.7.2 相当的功能，请将其替换为：

$('li.year').toggle(function(){
    $('.in_nums').css('display','none')
    var y = $(this).text()
    $('.'+y).css('display','inherit')
},
function(){
    var y = $(this).text()
    $('.'+y).css('display','none')
})

与：

$('li.year').click(function(){
    var y = $(this).text();
    var isVisible = $('.'+y).is(":visible");
    $('.in_nums').hide();
    $('.'+y).toggle(!isVisible);
});