0

Web ページにストーリー アップロード システムがあり、指定したフォルダーにストーリーをアップロードし、そこからそのコンテンツを Web ページに一覧表示します。テキストを分割したので、テキストの 300 文字だけが表示され、ユーザーがクリックすると残りが表示されます。

これはそれをリストします：

<?php foreach($dataArray as $data) { ?>
    <div class="visible">
        <?php echo $data[0] . "<br/><center><a href='#' class='story_show'>Teljes Történet</a></center>";  ?>
    </div>
    <div class="hidden">
        <?php echo $data[1]; ?>
    </div>
<?php } ?>

これは私のjQueryです：

$('.hidden').css('display', 'none');
$('.visible').click(function () {

    $('.hidden').css('display', 'inline');
});

このページ ( tortenetek.php) は、Ajax を介してメイン ページ ( blog.php) に読み込まれます。次のようにjQueryを含めましblog.phpた：

<link href='http://fonts.googleapis.com/css?family=Niconne&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="../css/stilus.css"/>
        <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../js/tinybox.js"></script>
        <script type="text/javascript" src="../js/ajax.js"></script>
        <link href="../css/lightbox.css" rel="stylesheet" />
        <script src="../js/lightbox.js"></script>
                <script src="../js/story.js"></script>

Story.js私が使用しているスクリプトファイルです。

4

1 に答える 1

1

あなたの質問を正しく理解した場合は、.click()呼び出しを呼び出しに変更.on()し、常にDOMにある祖先要素に一致するセレクターを渡すことにより、イベント委任を利用する必要があります。

$('#someAncestor').on('click', '.visible', function(){
    $(this).next('.hidden').css('display', 'inline');
});

thisおよびを使用するイベント ハンドラ関数の変更に注意してください.next()。現在の方法では、要素をクリックするとすべての要素が表示され ます。.hidden .visible

#someAncestorコードの実行時に DOM に存在する要素である必要があります。これが機能するのは、ほとんどの DOM イベントが発生元の要素 (ターゲット) からツリーを介してバブルアップするためです。そのイベントは、任意の祖先要素でキャプチャできます。

于 2012-07-04T10:33:56.100 に答える