Question

我正在使用jQuery项目滑块来创建滑动导航。

以下是我的代码片段：

    <div class="boxes-wrapper">
        <div id="Apps_Google" class="boxes active">
            <? 
            echo "<div class='box card_grid_static' url='http://mail.google.com'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Mail</div></div></div>";
            echo "<div class='box card_grid_static' url='http://drive.google.com'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Drive</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Calendar</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Sites</div></div></div>";
            ?>
        </div>
        <div id="Apps_Classroom" class="boxes">
            <? 

            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Classroom</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Schoology</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>ProgressBook</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>DASL</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>EdInsight</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Behavior Report</div></div></div>";                   
            ?>
        </div>
        <div id="Apps_Instruction" class="boxes">
            <? 
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Instruction</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Technology</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Learn</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>PD Express</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>eTPES</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>School Works</div></div></div>"; 
            ?>
        </div>
        <div id="Apps_Support" class="boxes">
            <?
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>VarTek</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Aesop</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Naviance</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>AIMsweb</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>IEP Anywhere</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>AR/STAR</div></div></div>";                   
            ?>
        </div>
        <div class="clear"></div>
    </div>

如您所见，项目滑块采用类“框”，然后使嵌套的“框”类中的项目滑动。

使用以下方法将“盒子”设为链接没有问题：

<script>
function notify() {
  alert( "clicked" );
}
$( ".boxes" ).on( "click", notify );
</script>

但是我不能使用以下方式将“盒子”作为链接：

<script>
function notify() {
  alert( "clicked" );
}
$( ".box" ).on( "click", notify );
</script>

“盒子”不会开火。以下是滑块javascript的链接：http://beta.hcsdoh.org/js/jQuery.Opie.ItemSlider.min.js

我对所发生的事情感到很茫然。显然有些东西阻止“盒子”射击。它不是动态生成的标记。

**进一步调查时，看起来好像.box仅在最后一个“.boxes”包装器中触发，这意味着.box将在最后一组链接上触发但不会触发先前的链接。它可以重写。有没有办法不重写它？

以下是测试页：http://beta.hcsdoh.org/index2.php

Answer 1

你应该使用文件准备

$(document).ready(function(){
     $( ".box" ).on( "click", function(){
        notify();
     });
});

Answer 2

我猜滑块脚本会以某种方式改变.box div。试一试：

$(document).on('click', '.box', notify);

Answer 3

<script>
function notify() {
  alert( "clicked" );
}
    $(window).on( "click", ".boxes", function(){
        notify();
    });
</script>

Answer 4

感谢Ronald01990的想法。我通过在每次点击后调整z-index来解决这个问题。

$( '#google' ).click( function () {   
    $( '#Apps_Google' ).addClass( 'zjump' );
    $( '#Apps_Classroom' ).removeClass( 'zjump' );
    $( '#Apps_Instruction' ).removeClass( 'zjump' ); 
    $( '#Apps_Support' ).removeClass( 'zjump' ); 
});


$( '#classroom' ).click( function () {   
    $( '#Apps_Classroom' ).addClass( 'zjump' ); 
    $( '#Apps_Google' ).removeClass( 'zjump' );
    $( '#Apps_Instruction' ).removeClass( 'zjump' ); 
    $( '#Apps_Support' ).removeClass( 'zjump' ); 
});


$( '#instruction' ).click( function () {   
    $( '#Apps_Instruction' ).addClass( 'zjump' );  
    $( '#Apps_Google' ).removeClass( 'zjump' );
    $( '#Apps_Classroom' ).removeClass( 'zjump' ); 
    $( '#Apps_Support' ).removeClass( 'zjump' ); 
});

$( '#support' ).click( function () {   
    $( '#Apps_Support' ).addClass( 'zjump' ); 
    $( '#Apps_Classroom' ).removeClass( 'zjump' );
    $( '#Apps_Instruction' ).removeClass( 'zjump' ); 
    $( '#Apps_Google' ).removeClass( 'zjump' ); 
});

Jquery onClick不会被解雇

4 个答案: