请稍等 ...
×

采纳答案成功！

向帮助你的同学说点啥吧！感谢那些助人为乐的人

关于 .triggerHandler('onLeave')

$('.component', $(this)).triggerHandler('onLeave');

第一页有两个.component, 使用.triggerHandler好像阻止了第二个.component的显示。也就是只能使用 return false 来实现了？是这样吗？
BH92182 2016-04-12 22:24:25
源自：3-2  静态页思路验证-组件切换
1025
收起

正在回答 回答被采纳积分+3

4回答

qq_大叔在厨房_ilxL47 2016-04-24 16:36:13

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="bar">为什么</div>
        <div class="bar">真的吗？</div>
        <div class="bar">呵呵哒</div>
        <div id="kk">
            点击我
        </div>
        <script src="js/lib/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script>
            $(function(){
                $("#kk").on("click",function(){
                    $("body").find('.bar').triggerHandler('onload')
                })
                $(".bar").on("onload",function(){
                    console.log($(this).html())
                })
            })
        </script>
    </body>
</html>

这里只能console.log出第一个元素

0 回复 有任何疑惑可以回复我~
收起回答
取消 回复
Lyn_Tech 2016-04-24 15:04:28

看代码没有错。你加下断点看看

$(function (){
            $('#h5').fullpage({
                sectionsColor: ['#D63C3C', '#9ED63C', '#3C84D6'],
                onLeave: function (index, nextIndex, direction) {
                    $('.page', '#h5').eq(index - 1).trigger('onLeave');
                },
                afterLoad: function (anchorLink, index) {
                    $('.page', '#h5').eq(index - 1).trigger('onLoad');
                }
            });
 
            $('.page').on('onLeave', function (e) {
                console.log($(this).attr('id'), '===>>', 'onLeave');
                $('.component', $(this)).triggerHandler('onLeave');
            });
             
            $('.page').on('onLoad', function () {
                console.log($(this).attr('id'), '===>>', 'onLoad');
                 debugger ; // 输出 $('.component', $(this)) 查看 slogan是否在  .component 中
                $('.component', $(this)).triggerHandler('onLoad');
            });
             
            $('.component').on('onLoad', function (e) {
                   debugger ; // 手动停止，如果slogan 执行到了此步，可以直接使用 $(this).show() 来显示 slogan
                $(this).fadeIn();
                // return false;
            })
             
            $('.component').on('onLeave', function (e) {
                $(this).fadeOut();
                // return false;
            })
        });


0 回复 有任何疑惑可以回复我~
收起回答
取消 回复
提问者 BH92182 2016-04-15 22:04:56 
$(function (){
            $('#h5').fullpage({
                sectionsColor: ['#D63C3C', '#9ED63C', '#3C84D6'],
                onLeave: function (index, nextIndex, direction) {
                    $('.page', '#h5').eq(index - 1).trigger('onLeave');
                },
                afterLoad: function (anchorLink, index) {
                    $('.page', '#h5').eq(index - 1).trigger('onLoad');
                }
            });

            $('.page').on('onLeave', function (e) {
                console.log($(this).attr('id'), '===>>', 'onLeave');
                $('.component', $(this)).triggerHandler('onLeave');
            });
            
            $('.page').on('onLoad', function () {
                console.log($(this).attr('id'), '===>>', 'onLoad');
                $('.component', $(this)).triggerHandler('onLoad');
            });
            
            $('.component').on('onLoad', function (e) {
                $(this).fadeIn();
                // return false;
            })
            
            $('.component').on('onLeave', function (e) {
                $(this).fadeOut();
                // return false;
            })
        });
<div id="h5">
            <div class="page section" id="page-1">
                 <!--当滚回第一页时，logo会显示出来，但是slogan不会显示-->
                <div class="component logo">
                    logo
                </div>
                <div class="component slogan">
                    slogan
                </div>
            </div>
            <div class="page section" id="page-2">
                <div class="component desc">
                    desc
                </div>
            </div>
             <div class="page section" id="page-3">
                <div class="component bar">
                    bar                    
                </div>
            </div>
        </div>


0 回复 有任何疑惑可以回复我~
收起回答
取消 回复
Lyn_Tech 2016-04-14 13:16:41

不太确定你的问题是什么。 trigger 和 triggerHandler 是不同的。 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。触发执行的返回是 false ，即 return false ，就会阻止浏览器默认的操作。


0 回复 有任何疑惑可以回复我~
收起回答
  • 提问者 BH92182 #1 
    老师我把代码贴下面了，麻烦帮我看下那里写错了吗？使用.triggerHandler() ，当滚回第一页时，logo会显示出来，但是slogan不会显示；
    回复 有任何疑惑可以回复我~ 2016-04-15 22:04:52
  • qq_大叔在厨房_ilxL47 #2 
    我也是同样的问题   第一个会有动画 后面的状态没发生变化  我的理解是 $(this).find('.component') 得到的是一个类为’component‘的DOM数组  要每个DOM都执行triggerHandler('onLeave')是不是要遍历$(this).find('.component') 数组使里面的元素依次执行triggerHandler('onLeave')才行  而$(this).find('.component').triggerHandler('onLeave')只会使第一个执行triggerHandler('onLeave')后面的元素就没效果？
    回复 有任何疑惑可以回复我~ 2016-04-24 16:14:40
取消 回复

相似问题

关于 .triggerHandler()
391 0 1
为什么要自定义onLoad和onLeave事件
2940 1 4
如果命名不一样不就不会有死循环了吗
408 0 1
为什么可以用on(&#039;leave&#039;)事件
542 0 1
关于fullpage里面的onLeave和afterLoad不太明白
6313 0 2

登录后可查看更多问答，登录/注册

问题已解决，确定采纳
还有疑问，暂不采纳
Web App用组件方式开发全站
  • 参与学习       3164    人
  • 解答问题       517    个

用HTML5/CSS3/JS流行技术，实现移动端可视化数据报告

了解课程

本课精华内容

问答

产品设计思路可以参考多个种类不？要培养用户习惯不？

961 9

各位大侠指点。。。。

1.3k 6

请问为什么在样式文件添加三个组件位置还是不变

867 6

关于3-7中组件onLoad和onLeave添加和删除类的问题

1.6k 5

markman问题

722 5

查看更多本课问答
意见反馈 帮助中心 APP下载
官方微信