0

このスクリプトを使用すると、他のテキストをクリックするとdivのテキストを変更できます。4つの異なるテキストがあり、他の4つのテキストをクリックしてdivのテキストを変更したいのですが、問題は私も次のリンクをクリックしたときに前のテキストを表示します。前のテキストをクリアして新しいテキストのみを表示したいです。添付スクリプトとHTMLを見つけて、助けてください。さらに質問がある場合はお知らせください。

<script type="text/javascript">
    $(document).ready(function() {
        $("#changeText1").click(function() {
            $("#textBox1").html("My text is changed1!");
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#changeText").click(function() {
            $("#textBox").html("My text is changed!");
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#changeText2").click(function() {
            $("#textBox2").html("My text is changed!2");
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#changeText3").click(function() {
            $("#textBox3").html("My text is changed!3");
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#changeText5").click(function() {
            $("#textBox5").html("My text is changed5!");
        });
    });
</script>

これはhtmlです

<ul class="tabs">
    <li><a href="#" id="changeText">inclusive</a></li>
    <li><a href="#" id="changeText2">Hotel</a></li>
    <li><a href="#" id="changeText3">Car</a></li>
    <li class="end"><a href="#" id="changeText5">Cruise</a></li>
</ul>
<div class="tabs_cont">
    <div id="textBox3" style="color:#FFF"></div>
    <div id="textBox" style="color:#FFF"></div>
    <div id="textBox1" style="color:#FFF"></div>
    <div id="textBox2" style="color:#FFF"></div>
    <div id="textBox5" style="color:#FFF"></div>
</div>
<div id="textBox4" style="color:#FFF"></div>
4

5 に答える 5

1

script個別のタグを使用したり$(document).ready、各クリックイベントを登録したりする必要はありません。これはすべて一度で行うことができます。

より良い解決策はdiv、すべてのタブに1つを使用することですが、それでもすべてのdivを保持したい場合は、次のコードが問題の解決に役立つはずです。

<script type="text/javascript">
$(document).ready(function() {
    $("#changeText1").click(function() {
        $('.tabs_cont div').empty();
        $("#textBox1").html("My text is changed1!");
    });

    $("#changeText").click(function() {
        $('.tabs_cont div').empty();
        $("#textBox").html("My text is changed!");
    });

    $("#changeText2").click(function() {
        $('.tabs_cont div').empty();
        $("#textBox2").html("My text is changed!2");
    });

    $("#changeText3").click(function() {
        $('.tabs_cont div').empty();
        $("#textBox3").html("My text is changed!3");
    });

    $("#changeText5").click(function() {
        $('.tabs_cont div').empty();
        $("#textBox5").html("My text is changed5!");
    });
});
</script>
于 2013-03-24T10:22:02.120 に答える
0

新しいテキストを設定する前に、要素をクリアしてみてください。

<script type="text/javascript">
    $(document).ready(function() {
        $("#changeText2").click(function() {
            $("#textBox2").empty().html("My text is changed!2");
        });
    });
</script>
于 2013-03-24T10:14:43.633 に答える
0

これを試して ：

<script type="text/javascript">
    $(document).ready(function() {
        $("#changeText1").click(function() {
            $("#textBox1").text("My text is changed1!");
        });
    });
</script>
于 2013-03-24T10:17:48.650 に答える
0

私はあなたがいくつかのdivを持っている理由はないと仮定するつもりです。1つのdivにのみ書き込みたいと述べた場合。したがって、問題は、1つだけではなく複数のdivに書き込んでいることです。これがあなたが望むものでない場合は、私を訂正してください。

また、いくつかのスクリプトタグとテキストボックスは不要なので、少なくともこの例では削除しました。

作業デモ

HTML：

<ul class="tabs">
    <li><a href="#" id="changeText">inclusive</a></li>
    <li><a href="#" id="changeText2">Hotel</a></li>
    <li><a href="#" id="changeText3">Car</a></li>
    <li class="end"><a href="#" id="changeText5">Cruise</a></li>
</ul>
<div class="tabs_cont">
    <div id="textBox" ></div>
</div>
<div id="textBox4" style="color:#FFF"></div>

Javascript：

$(document).ready(function() {
    $("#changeText").click(function() {
        $("#textBox").text("My text is changed!");
    });
    $("#changeText2").click(function() {
        $("#textBox").text("My text is changed!2");
    });
    $("#changeText3").click(function() {
        $("#textBox").text("My text is changed!3");
    });
    $("#changeText5").click(function() {
        $("#textBox").text("My text is changed5!");
    });
});

編集： JSFiddleを保存するのを忘れました..今それはばかげています。

于 2013-03-24T10:21:11.050 に答える
0

これがあなたが望むものであるかどうかは100％わかりません。しかし、コメントを残してください、そして私はそれを更新します。これはスマートセレクト構造であり、コードで作成したすべてのダブレットをキャンセルします。

準備完了状態を1回だけ使用してみてください。これは、はるかにクリーンです。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <link rel="stylesheet" href="main.css" type="text/css" />
    <script src="jquery.js" type="text/javascript"></script>
    <script src="main.js" type="text/javascript"></script>
</head>
<body>
    <ul class="tabs">
        <li><a href="#" id="changeText">inclusive</a></li>
        <li><a href="#" id="changeText2">Hotel</a></li>
        <li><a href="#" id="changeText3">Car</a></li>
        <li class="end"><a href="#" id="changeText5">Cruise</a></li>
    </ul>
    <div class="tabs_cont" style="background-color: black;">
        <div id="textBox3" style="color:#FFF">3</div>
        <div id="textBox" style="color:#FFF">0</div>
        <div id="textBox1" style="color:#FFF">1</div>
        <div id="textBox2" style="color:#FFF">2</div>
        <div id="textBox5" style="color:#FFF">5</div>
    </div>
    <div id="textBox4" style="color:#FFF"></div>
</body>
</html>

main.js

'use strict';
$(document).ready(function(){
    $('.tabs [id^="changeText"]').click(function(){
        var index = $(this).attr('id').split('changeText')[1];
        var backup_html = $('.tabs_cont #textBox' + index).html();

        // These are all the textboxes you want to match
        $('.tabs_cont [id^="textBox"]').html(''); // Empty them (or something else)

        // This HTML selector is the same as the one you clicked "changeText"
        $('.tabs_cont #textBox' + index).html('My text has changed: ' + (index == 0 ? 0 : index) + ': ' + $(this).html());
    });
});

style="background-color: black;"HTMLではテスト目的のためだけでした:)

アップデート

main.jsOPの要求による新しい：

'use strict';
$(document).ready(function(){
    $('.tabs [id^="changeText"]').click(function(){
        var index = $(this).attr('id').split('changeText')[1];

        var new_html = 'My text has changed: ';

        switch(index) {
            case '':
                new_html += 'Text for 0';
                break;
            case '1':
                new_html += 'Text for 1';
                break;
            case '2':
                new_html += 'Text for 2';
                break;
            case '3':
                new_html += 'Text for 3';
                break;
            case '4':
                new_html += 'Text for 4';
                break;
            case '5':
                new_html += 'Text for 5';
                break;
        }

        // These are all the textboxes you want to match
        //$('.tabs_cont [id^="textBox"]').html(''); // Empty them (or something else)

        // This HTML selector is the same as the one you clicked "changeText"
        $('.tabs_cont #textBox' + index).html(new_html);
    });
});

よりクリーンなマップセレクターを備えた2番目のバリアント

'use strict';
$(document).ready(function(){
    $('.tabs [id^="changeText"]').click(function(){
        var index = $(this).attr('id').split('changeText')[1];

        var new_html = {
            '' : 'Text for 0',
            '1' : 'Text for 1',
            '2' : 'Text for 2',
            '3' : 'Text for 3',
            '4' : 'Text for 4',
            '5' : 'Text for 5',
        };

        // These are all the textboxes you want to match
        //$('.tabs_cont [id^="textBox"]').html(''); // Empty them (or something else)

        // This HTML selector is the same as the one you clicked "changeText"
        $('.tabs_cont #textBox' + index).html('My text has changed: ' + new_html[index]);
    });
});
于 2013-03-24T10:23:17.773 に答える