1

以下のコードを参照してください。全ページのセクションがあり、それぞれにボタンがあります。ボタンが押されたら、ページを次のセクションに進めたいと思います。<h1></h1>セクションのテキストをまたは<p></p>タグで囲んだ場合を除いて、すべて正常に機能しました。たとえば、セクション1と2を参照してください。これらのタグを追加した後、何らかの理由でボタンが機能しません。それは他のセクションで働いています。セクション1でも、<h1></h1>タグを削除すると正常に機能します。これらのタグはボタンの機能と何の関係がありますか？

<!DOCTYPE html>
<html>
<head>
    <title>Selecting multiple DIV tags with jquery</title>
    <script type="text/javascript" src="./jquery.js">
    </script>
    <style type="text/css">

        html{
            overflow: hidden;
        }

        body {
            backround-color: rgb(250, 250, 250);
        }

        h1 {
            font-size: 48px;
            color: rgb(90,90,90);
        }

        .slide {
            display: block;
            position: absolute;
            border-style: solid;
            border-width: 1px;
            top: 0px;
            left: 0px;
            padding:20px;
            height: 95%;
            width: 100%;
            font-family: Georgia;
        }
    </style>
</head>
<body>

    <section class="slide">
        <h1>This is the first div.</h1>
    </section>

    <section class="slide">
        <p>This is the second div.</p> 
    </section>


    <section class="slide">This is the third div.</section>

    <section class="slide">This is the fourth div.</section>

    <section class="slide">This is the fifth div.</section>

    <section class="slide">This is the sixth div.</section>



    <script type="text/javascript">

    // Assign ids to each section in the order they appear.

    $(document).ready(function(){
        $("section").each(function(index){
            idtag = 's' + (index + 1)
            $(this).attr('id', idtag);
            $(this).append('<button>Next div</button>');
            $(this).css('opacity', 0);
        });


    var presentation = function() {

        $("section").each(function(index){
            $(this).css('opacity', 0);
        });     
        // Check if the current url points to a specific id. If not point
        // it to id = 1, otherwise point it to the id specified in the URL.

        var currenturl = $(location).attr('href');


        var indexhash = currenturl.lastIndexOf('#')

        if (indexhash === -1) {
            var newurl = currenturl + '#s1';
            $("#1").css('opacity',1);
            window.location.href = newurl;
        }
        else {
            var currentid = currenturl.substring(indexhash, currenturl.length);
            console.log(currentid);
            $(currentid).css('opacity', 1);
            window.location.href = currenturl;
            // window.location.assign(currenturl);
        }

    };

        var nextdiv = function() {
            currenturl = location.href;
            currentid = location.hash;
            console.log(currentid);
            newidnum = parseInt(currentid.substring(currentid.indexOf('s')+1, currentid.length),10)+1;
            newid = "#s" + newidnum;
            newurl = currenturl.substring(0,currenturl.lastIndexOf('#'))+newid;
            console.log(newurl);
            window.location.href = newurl;

        };

        // $(document).ready(presentation);
        presentation();
        $(window).bind('hashchange', presentation);
        $('button').bind('click', nextdiv);

    });

    </script>
</body>
</html>
4

1 に答える 1

1

これは、セクション要素内の HTML 要素とは関係ありません。すべての要素を互いの上に積み重ねて、実際に表示プロパティでそれらを非表示にするのではなく、不透明度をゼロに設定したという事実に関係しています (display:none対opacity:0）。これは、正常に機能する最初のセクション要素以外をすべて削除するとわかります。また、Chrome の開発者ツールなどのツールを使用してコードを調べると、6 番目のセクション要素が実際には一番上にあり、その下のすべてがブロックされていることがわかります。また、section 要素の子であるボタンではなく、毎回同じトップ ボタンをクリックしています。各ボタンにIDを割り当ててから、コンソールにログを記録することで確認できます$('button').click(function(){console.log($('button').attr('id'));});

于 2012-06-26T15:52:28.423 に答える