0

ページの読み込み/更新時にコンテナーのデフォルトのコンテンツを設定しようとしています。これにより、コンテナーにデータを入力するクリック イベントが発生するまで空に見えません。

私が使用しているjQueryは次のようになります

$(document).ready(function() {
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').hide();
$('#answer' + numb).show();
});

});

私のhtmlメイクは次のようになります：

<div class="new_member_box">
     <a href="#" class="question1"><h4>Vision</h4></a>
</div> 

<div class="new_member_box_display" id="answer1">
    1
</div> 

  <div class="new_member_box_display" id="answer">
    Default
</div>

ページが読み込まれるとデフォルトのテキストが表示されますが、Vision リンクをクリックすると 1 が表示され、その下のボックスにデフォルトが表示されます。私が欲しいのは、ページの読み込み/更新時にデフォルトが表示され、リンクがクリックされるとデフォルトが消え、クリックされたリンクの値が表示されることです。

4

2 に答える 2

1

また、$('[id^="answer"]').hide();dom の準備ができている..

$(document).ready(function(){
     $('[id^=answer]').not('#answer').hide(); //add this
    //click function code

});

ワーキングjsFiddle

于 2013-05-06T23:48:26.227 に答える
1

あなたのコードを分解しましょう：

$('[id^="answer"]').hide(); //This hids all the elements starting with answer as id

$('#answer' + numb).show(); // and show a particular answer

しかし、デモのデフォルトのコンテンツ ボックスにquestionは idがあります

<div id="question" class="new_member_box_display">
    Text will appear here when one of the tabs above is clicked
</div>

したがって、スクリプトはこの部分には影響しません。有効な解決策は、この div をデフォルト ボックスとして表すクラスを追加することです。何かのようなもの

<div id="question" class="new_member_box_display default">
                                          <!--    ^ I added a class here -->
    Text will appear here when one of the tabs above is clicked
</div>

次に、スクリプトで最初に非表示にします。

$(function() {
    $('[class^="question"]').on('click', function(e){
        e.preventDefault();
        var numb = this.className.replace('question', '');
        $('.default').hide(); // Lets hide that first
        $('[id^="answer"]').hide();
        $('#answer' + numb).show();
    });
});
于 2013-05-07T00:30:52.963 に答える