更新jquery后脚本不起作用

问题描述 投票:0回答:1

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

最初,显示所有年份。多年来一直隐藏的问题显示无,当点击时,它会转换为显示继承。

它应该如下所示:

<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)
    })
})

它在出版年份添加了display none:

<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语法中有什么变化或可能是什么问题?

jquery css css-selectors
1个回答
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);
});
© www.soinside.com 2019 - 2024. All rights reserved.