2

Let's say I have this: 

 <div class="title">Title Example 1</div>
 <span id="test">Button</span>

And then on clicking of a span called #test how can I change the text in .title?

I tried using this but didn't work: 

    $('#test').click(function(){
    $(".title").text("Haha");
    return false;
});

Entire HTML:

<html>
<head>
    <title>Page</title>
    <link rel="stylesheet" href="index.css">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="/fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
        <script type="text/javascript">
        $('#test').click(function(){
    $(".title").text("Haha");
    return false;
}); 
    </script>
        <script type="text/javascript">
        $(document).ready(function() {
            /*
             *  Simple image gallery. Uses default settings
             */

            $('.fancybox').fancybox();

            /*
             *  Different effects
             */

             $('.fancybox-effects-a').fancybox({
                    autoDimensions: false,
                    height: 568,
                    width: 611
                }); 

            // Change title type, overlay closing speed
            $(".fancybox-effects-a").fancybox({
                helpers: {
                    title : {
                        type : 'outside'
                    },
                    overlay : {
                        speedOut : 0
                    }
                }
            });

            // Disable opening and closing animations, change title type
            $(".fancybox-effects-b").fancybox({
                openEffect  : 'none',
                closeEffect : 'none',

                helpers : {
                    title : {
                        type : 'over'
                    }
                }
            });

            // Set custom style, close if clicked, change title type and overlay color
            $(".fancybox-effects-c").fancybox({
                wrapCSS    : 'fancybox-custom',
                closeClick : true,

                openEffect : 'none',

                helpers : {
                    title : {
                        type : 'inside'
                    },
                    overlay : {
                        css : {
                            'background' : 'rgba(238,238,238,0.85)'
                        }
                    }
                }
            });

            // Remove padding, set opening and closing animations, close if clicked and disable overlay
            $(".fancybox-effects-d").fancybox({
                padding: 0,

                openEffect : 'elastic',
                openSpeed  : 150,

                closeEffect : 'elastic',
                closeSpeed  : 150,

                closeClick : true,

                helpers : {
                    overlay : null
                }
            });

            /*
             *  Button helper. Disable animations, hide close button, change title type and content
             */

            $('.fancybox-buttons').fancybox({
                openEffect  : 'none',
                closeEffect : 'none',

                prevEffect : 'none',
                nextEffect : 'none',

                closeBtn  : false,

                helpers : {
                    title : {
                        type : 'inside'
                    },
                    buttons : {}
                },

                afterLoad : function() {
                    this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
                }
            });


            /*
             *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
             */

            $('.fancybox-thumbs').fancybox({
                prevEffect : 'none',
                nextEffect : 'none',

                closeBtn  : false,
                arrows    : false,
                nextClick : true,

                helpers : {
                    thumbs : {
                        width  : 50,
                        height : 50
                    }
                }
            });

            /*
             *  Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
            */
            $('.fancybox-media')
                .attr('rel', 'media-gallery')
                .fancybox({
                    openEffect : 'none',
                    closeEffect : 'none',
                    prevEffect : 'none',
                    nextEffect : 'none',

                    arrows : false,
                    helpers : {
                        media : {},
                        buttons : {}
                    }
                });

            /*
             *  Open manually
             */

            $("#fancybox-manual-a").click(function() {
                $.fancybox.open('1_b.jpg');
            });

            $("#fancybox-manual-b").click(function() {
                $.fancybox.open({
                    href : 'iframe.html',
                    type : 'iframe',
                    padding : 5
                });
            });

            $("#fancybox-manual-c").click(function() {
                $.fancybox.open([
                    {
                        href : '1_b.jpg',
                        title : 'My title'
                    }, {
                        href : '2_b.jpg',
                        title : '2nd title'
                    }, {
                        href : '3_b.jpg'
                    }
                ], {
                    helpers : {
                        thumbs : {
                            width: 75,
                            height: 50
                        }
                    }
                });
            });


        });
    </script>
    <link rel="stylesheet" type="text/css" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />
</head>
<body>
                 <div class="title">Title Example 1</div>
 <span id="test">Button</span>
</body>
</html>
4

3 回答 3

2

将“alert()”作为函数的第一个语句，看看是否会弹出消息框？

编辑：尝试将 Click 事件函数放在 $(document).ready(function(){}) 块中。我认为您的函数永远不会分配给 html 控件的单击事件。

Edit2：测试并确认。您的脚本永远不会被分配给 click 事件处理程序。要么使用内联 html 标签

<span id="test" onclick="myFunction()">button</span>

然后将您的脚本更改为包含在一个名为 myFunction 的函数中

<script type="text/javascript">
        function myFunction() {
                $(".title").text("Haha"); //I would advise using .html here though
                return false;
        }
 </script>

或者在页面通过 JQuery 完全加载后赋值

<script type="text/javascript">
        $(document).ready(function () {
            $('#test').click(function () {
                $(".title").text("Haha");
                return false;
            });
etc...
</script>
于 2013-07-24T13:29:04.860 回答
1

您试图在元素存在之前将事件处理程序绑定到元素。

移动 ，<script>使其出现在之后<span>。

于 2013-07-24T13:45:25.400 回答
-1

尝试 .html() 而不是 .text() 并将您的绑定包装在准备好的文档中，因为您在 html 之前调用它

于 2013-07-24T13:49:08.753 回答