jqueryクリックして変更ページをポップアップ表示します-フロントエンドQ&A-php.cn

jqueryクリックして変更ページをポップアップ表示します

WBOY

リリース： 2023-05-18 21:13:07

オリジナル

628 人が閲覧しました

現代の Web 開発では、多くの場合、ページ要素やインタラクションを動的に変更する必要があります。この要件は多くの状況で非常に実用的です。しかし、これらの機能を実現するには、従来の HTML、CSS、JavaScript 技術には一定の限界があるため、その機能を拡張するフレームワークやライブラリが数多く登場しました。その中でも、jQuery は非常に有名な JavaScript ライブラリであり、DOM 操作をより便利かつ簡単にすることができます。この記事では、jQueryを使ってクリックすると変更したページをポップアップする機能を実現する方法を紹介します。

まず、ページ上で変更が必要なボタンと要素を表示できるように、基本的な HTML および CSS コードを準備する必要があります。次のコード構造を検討できます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery点击弹出修改页面</title>
    <style>
        /*定义弹出框*/
        .pop-up{
            display: none;
            position: absolute;
            background: white;
            border: 1px solid lightgray;
            padding: 20px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
        }
    </style>
</head>
<body>
    <!--定义按钮-->
    <button id="edit-btn">修改</button>

    <!--定义需要修改的元素-->
    <div id="content">
        <h1>这是一个需要修改的标题</h1>
        <p>这是一段需要修改的文本内容</p>
    </div>

    <!--定义弹出框-->
    <div class="pop-up">
        <h2>修改标题</h2>
        <input type="text" id="title-input">
        <h2>修改内容</h2>
        <textarea id="content-input"></textarea>
        <button id="submit-btn">提交</button>
    </div>

    <!--引入jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>

ログイン後にコピー

上記のコードでは、ボタン (ID は「edit-btn」)、変更する必要がある要素 (ID は「content」)、およびポップアップボックス (クラスは「ポップアップ」)。ポップアップボックスには、送信ボタン (ID は「submit-btn」)、テキスト入力ボックス (ID は「title-input」)、およびテキストフィールド (ID は「content-input」) が含まれています。これらの要素は次のコードで使用されます。

次に、JavaScript コードを使用して、ボタンをクリックしてポップアップボックスをポップアップする機能を実現する必要があります。具体的な実装方法は次のとおりです。

$(document).ready(function(){
   $("#edit-btn").click(function(){
       $(".pop-up").show();
   });
});

ログイン後にコピー

上記のコードでは、最初にドキュメントの Ready イベント処理関数をバインドして、ページが完全に読み込まれた後にコードが実行されるようにします。次に、jQuery の click() 関数を使用して、ボタンがクリックされたときに実行されるクリックイベントハンドラー関数をバインドします。この関数では、jQuery の show() 関数を使用してポップアップボックス (クラス "pop-up") を表示します。

最後に、クリックイベントを送信ボタンにバインドする必要もあります。送信ボタンがクリックされると、ポップアップボックス内の変更された内容が対応する要素に入力されます。コードは次のとおりです。

$(document).ready(function(){
    $("#edit-btn").click(function(){
        $(".pop-up").show();
    });
    $("#submit-btn").click(function(){
        var title = $("#title-input").val();
        var content = $("#content-input").val();
        $("#content h1").text(title);
        $("#content p").text(content);
        $(".pop-up").hide();
    });
});

ログイン後にコピー

上記のコードでは、jQuery の val() 関数を使用してテキスト入力ボックスとテキストフィールドのテキストコンテンツを取得し、jQuery の text() 関数を使用してこれらのコンテンツを挿入します。対応する要素に挿入します。最後に、jQuery の Hide() 関数を使用してポップアップボックスを非表示にします。

まとめると、jQuery の click()、show()、val()、text() 関数を使用すると、クリックして変更されたページをポップアップする機能を簡単に実現できます。この機能は、多くの Web サイト、特にコンテンツの対話と動的な更新が必要な場合に非常に役立ちます。 jQuery についてさらに詳しく知りたい場合は、公式ドキュメントを確認するか、他の資料を参照して知識とスキルを広げることができます。

以上がjqueryクリックして変更ページをポップアップ表示しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。