Question

我有一个已经存在的节目隐藏脚本，但我在展示“活跃”节目时遇到了一些困难。你进入页面后立即div。如果单击另一个指示符，则应隐藏div，并保持与其余指标相同的功能。

这是我的Html

<section id="slider">
    <div id="carousel-example-generic" class="carousel slide">
        <div class="show_hide" rel="#slidingDiv">   
             <!-- Indicators bullet -->
             <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
             </ol>

这是我的JS

function hideloop(){
    try{
        for(var i = 0; i < 4; i++){
            $('#group'+i).hide();   
        }
    }catch(e){
        throw(e);   
    }

}
$(function(){
    hideloop();
    $('.carousel-indicators li').click(function(evt){
        var number = $(evt.target).attr("data-slide-to");
        hideloop();
        $('#group'+number).show();
    });
});

我已经在网上和堆栈上查看但无法找到这个问题。

亚当

Answer 1

这应该适合你： -

function showHideGroup(){
    // hide all which has an id starting with 'group'
    $('[id^=group]').hide();
    // get the active group using data
    var number = $('.carousel-indicators li.active').data("slide-to");
    // show active group
    $('#group'+number).show();
}

$(function(){

    // call show/hide groups on page load
    showHideGroup();

    $('.carousel-indicators li').click(function(evt){
        // if this li is not active
        if(!$(this).hasClass('active')){
            // remove active from current active 
            $('.carousel-indicators li.active').removeClass('active');
            //add active to this li
            $(this).addClass('active');
            // show/hide relevant groups
            showHideGroup();
        }
    });
});

Answer 2

我认为您的html与您的js不匹配，但无论您的hideLoop方法是否需要选择过滤掉活动元素。

/**
 * @param {DOMElement} parent       The container element to close children of.
 * @param {DOMElement|null} active  The element you want to leave open. 
 *                                  Pass null to close all.
 */
function hideAllExcept( parent, active ) {
    var $parent = $(parent);

    var $children = $parent.children();

    if ( active !== null ) {
        $children = $children.not( active );
    }

    $children.hide();
}

// And the execution code
vsr $carousel = $('#slider .carousel-indicators');
var $active = $('.carousel-indicators .active');
$active = ( $active.length > 0 ) ? $active : null;

hideAllExcept( $carousel, $active );

$carousel.find('li').click(function(evt){
    var $current = $(this);
    hideAllExcept( $carousel, $current );
    $current.show()
});

Javascript - 显示/隐藏 - 显示活动直到点击

2 个答案: