Fatal编程技术网
  • javascript/
  • Javascript 选中复选框时隐藏iframe中的元素

Javascript 选中复选框时隐藏iframe中的元素

javascript html iframe

Javascript 选中复选框时隐藏iframe中的元素,javascript,html,iframe,Javascript,Html,Iframe,我正在开发自己的签名（电子邮件）生成器。除了一个功能外，所有功能都正常工作。当用户选中复选框时，带有电话号码的字段应消失。JS如下所示： <script> $(document).ready(function(){ $('form').on('submit', function(e){ e.preventDefault(); var imie = $('input[name="imie"]').val(), stano

我正在开发自己的签名（电子邮件）生成器。除了一个功能外，所有功能都正常工作。当用户选中复选框时，带有电话号码的字段应消失。JS如下所示：

<script>
$(document).ready(function(){
    $('form').on('submit', function(e){
        e.preventDefault();

        var imie = $('input[name="imie"]').val(),
            stanowisko = $('input[name="stanowisko"]').val(),
            telefon = $('input[name="telefon"]').val(),
            email = $('input[name="email"]').val();

        var iframe = $('iframe#emailSignature').contents();

        iframe.find('#imie').text(imie);
        iframe.find('#stanowisko').text(stanowisko);
        iframe.find('#telefon').text(telefon);
        iframe.find('#email').attr('href', 'mailto:' + email).text(email);

            $("#hide_phone_no").click(function () {
                if ($(this).is(":checked")) {
                    iframe.find("#disable_phone").hide();
                } else {
                    iframe.find("#disable_phone").show();
                }
            });

    });
});


$（文档）.ready（函数（）{
$（'form'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
var imie=$（'input[name=“imie”]”）。val（），
stanowisko=$（'input[name=“stanowisko”]”）。val（），
telefon=$（'input[name=“telefon”]'）。val（），
email=$（'input[name=“email”]）.val（）；
var iframe=$（'iframe#emailSignature'）.contents（）；
iframe.find（'#imie'）.text（imie）；
iframe.find（'#stanowisko'）.text（stanowisko）；
iframe.find（“#telefon”）.text（telefon）；
iframe.find（'#email'）.attr（'href'，'mailto:'+email）.text（email）；
$（“#隐藏电话号码”）。单击（功能（）{
如果（$（this）.is（“：checked”））{
iframe.find（“#disable_phone”）.hide（）；
}否则{
iframe.find（“#disable_phone”）.show（）；
}
});
});
});

id“disable_phone”与iframe中的一个对象相关，该对象是一个具有2x TD的对象

为什么它不起作用

编辑： 下面可以找到index.HTML和iframe内容的HTML代码

index.html

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
    body {
        font-family: 'Montserrat', sans-serif;
    }
    label {
        display: block;
    }
    table {
        border-bottom:10px solid #ffa312;
        margin-bottom:40px;
    }
    #gen_form {
        background:#e6e6e6;
        padding:0 1em;
    }
</style>
<script>
    $(document).ready(function(){
        $('form').on('submit', function(e){
            e.preventDefault();

            var imie = $('input[name="imie"]').val(),
                stanowisko = $('input[name="stanowisko"]').val(),
                telefon = $('input[name="telefon"]').val(),
                email = $('input[name="email"]').val();

            var iframe = $('iframe#emailSignature').contents();

            iframe.find('#imie').text(imie);
            iframe.find('#stanowisko').text(stanowisko);
            iframe.find('#telefon').text(telefon);
            iframe.find('#email').attr('href', 'mailto:' + email).text(email);

                $("#hide_phone_no").click(function () {
                    if ($(this).is(":checked")) {
                        iframe.find("#disable_phone").hide();
                    } else {
                        iframe.find("#disable_phone").show();
                    }
                });

        });
    });
</script>
</head>
<body>
    <form autocomplete="off" id="gen_form">
        <table width="100%" cellspacing="0" cellpadding="0">
            <tr>
                <td valign="top">
                    <h3>1. Wypełnij formularz:</h3>
                    <div class="row">
                        <label for="">Imię i nazwisko:</label>
                        <input type="text" placeholder="" name="imie" autocomplete="off">
                    </div>
                    <div class="row">
                        <label for="">Stanowisko:</label>
                        <input type="text" placeholder="" name="stanowisko" autocomplete="off">
                    </div>
                    <div class="row">
                        <label for="">Numer telefonu (+48 XXX XXX XXX)</label>
                        <input type="text" placeholder="" name="telefon" autocomplete="off">
                    </div>
                    <div class="row">
                        <label for="">Adres email:</label>
                        <input type="text" placeholder="" name="email" autocomplete="off">
                    </div>
                    <div class="row">
                        <label for="">Zaznacz pole jeżeli chcesz ukryć telefon:</label>
                        <input type="checkbox" id="hide_phone_no" name="hidephone">
                    </div>                
                    <br><br>
                </td>
                <td valign="top">
                    <h3>2. Kliknij w przycisk poniżej:</h3>
                    <div class="row">
                        <button type="submit">Generuj!</button>
                    </div>
                </td>
                <td valign="top">
                    <h3>3. Wykonaj poniższe kroki:</h3>
                    <ol>
                        <li>Kliknij w dowolnym (niepodlinkowanym) miejscu na wygenerowanej niżej stopce</li>
                        <li>CTRL + A i CTRL + C</li>
                        <li>Skopiowaną treść wklej za pomocą CTRL + V w używanym kliencie pocztowym</li>
                    </ol>
                </td>
            </tr>
        </table>
        <p>Wizualizacja stopki:</p>
    </form>
    <iframe src="email_signature.html" width="100%" height="350" frameborder="0" id="emailSignature" name="emailSignature"></iframe>
</body>
</html>


身体{
字体系列：“蒙特塞拉特”，无衬线；
}
标签{
显示：块；
}
桌子{
边框底部：10px实心#ffa312；
边缘底部：40px；
}
#通用表格{
背景：#e6；
填充：0.1em；
}
$（文档）.ready（函数（）{
$（'form'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
var imie=$（'input[name=“imie”]”）。val（），
stanowisko=$（'input[name=“stanowisko”]”）。val（），
telefon=$（'input[name=“telefon”]'）。val（），
email=$（'input[name=“email”]）.val（）；
var iframe=$（'iframe#emailSignature'）.contents（）；
iframe.find（'#imie'）.text（imie）；
iframe.find（'#stanowisko'）.text（stanowisko）；
iframe.find（“#telefon”）.text（telefon）；
iframe.find（'#email'）.attr（'href'，'mailto:'+email）.text（email）；
$（“#隐藏电话号码”）。单击（功能（）{
如果（$（this）.is（“：checked”））{
iframe.find（“#disable_phone”）.hide（）；
}否则{
iframe.find（“#disable_phone”）.show（）；
}
});
});
});
1.Wypełnij公式：
伊米·纳兹维斯科：
斯坦诺维斯科：
电话号码（+48 XXX XXX XXX）
地址及电邮：
Zaznacz pole jeżeli chcesz ukryćtelefon：



2.Kliknij w przycisk poniżej：
将军！
3.Wykonaj poniższe kroki：

  • Kliknij w dowolnym（niepodlinkowanym）miejscu na Wyrogenej niżej stopce
    • 

  • CTRL+A i CTRL+C
    • 

  • 斯科皮奥万·特雷切维奇·沃克莱伊·扎·波莫克·CTRL+V w używanym Kliciencie pocztowym
    • 
Wizualizacja stopki：
    然后我们有一个iframe内容：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table width="400" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td width="100" valign="middle">
                <a href="https://qubicgames.com" target="_blank">
                    <img src="https://colorfill.pl/qubicgames/qg-logo.jpg" alt="QubicGames" width="90" height="90" style="display:block;border:0;">
                </a>
            </td>

            <td>
                <table cellspacing="0" cellpadding="0" style="font-family:Arial, Helvetica, sans-serif;font-size: small; line-height:1.5em; color:#000000;">
                    <tbody>
                        <tr>
                            <td id="imie" height="24" valign="top" style="font-size:14px;line-height:1.5em;">
                                Joanna Przykładowa
                            </td>
                        </tr>
                        <tr>
                            <td height="24" valign="top" style="font-size:12px;line-height:1.5em;border-bottom:1px solid #ffa312;">
                                <strong id="stanowisko">Head of Design</strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <table cellspacing="0" cellpadding="0" style="font-family:Arial, Helvetica, sans-serif;font-size: 10px; padding-top:5px;line-height:1.5em; color:#000000;">
                                    <tbody>
                                        <tr id="disable_phone">
                                            <td width="27" style="font-weight:bold;color:#ffa312;">
                                                m.
                                            </td>
                                            <td id="telefon">
                                                +48 123 456 789
                                            </td>                                        
                                        </tr>
                                        <tr>
                                            <td width="27" style="font-weight:bold;color:#ffa312;">
                                                e.
                                            </td>
                                            <td>
                                                <a id="email" href="mailto:j.przykładowa@qubicgames.com" target="_blank" style="color:#000000;text-decoration:underline;">j.przykładowa@qubicgames.com</a>
                                            </td>

                                        </tr>
                                        <tr>
                                            <td width="27" style="font-weight:bold;color:#ffa312;">
                                                w.
                                            </td>
                                            <td>
                                                <a href="https://qubicgames.com" target="_blank" style="color:#000000;text-decoration:underline;">www.qubicgames.com</a>
                                            </td>

                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td style="font-size:10px;line-height:1.5em;font-weight:bold;padding-top:5px;">
                                QubicGames S.A. / Poland
                            </td>
                        </tr>
                        <tr>
                            <td height="44" valign="middle">
                                <table cellspacing="0" cellpadding="0">
                                    <tbody>
                                        <tr>
                                            <td width="30">
                                                <a href="https://www.facebook.com/QubicGamespl" target="_blank">
                                                    <img src="https://colorfill.pl/qubicgames/fb.png" alt="Facebook" width="20" height="20" style="display:block;border:0;">
                                                </a>
                                            </td>
                                            <td width="30">
                                                <a href="https://twitter.com/QubicGamespl" target="_blank">
                                                    <img src="https://colorfill.pl/qubicgames/tw.png" alt="Twitter" width="20" height="20" style="display:block;border:0;">
                                                </a>
                                            </td>
                                            <td width="30">
                                                <a href="https://www.instagram.com/QubicGamespl/" target="_blank">
                                                    <img src="https://colorfill.pl/qubicgames/in.png" alt="Instagram" width="20" height="20" style="display:block;border:0;">
                                                </a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <!--<tr>
                            <td style="font-size:8px;line-height:15px;">
                                VikingCO Poland, ul. Tęczowa 13/210, 53-601 Wrocław, <br>NIP: 8971793-639, REGON: 022284492, KRS: 0000484436
                            </td>
                        </tr>-->
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

    
乔安娜·普齐克·阿多瓦
设计负责人
M
+48 123 456 789
E
W
库比克运动会S.A./波兰

    $(document).ready(function(){
    $('form').on('submit', function(e){
        e.preventDefault();

        var imie = $('input[name="imie"]').val(),
            stanowisko = $('input[name="stanowisko"]').val(),
            telefon = $('input[name="telefon"]').val(),
            email = $('input[name="email"]').val();

        var iframe = $('iframe#emailSignature').contents();

        iframe.find('#imie').text(imie);
        iframe.find('#stanowisko').text(stanowisko);
        iframe.find('#telefon').text(telefon);
        iframe.find('#email').attr('href', 'mailto:' + email).text(email);
        hideShowPhoneNo(iframe)

    });
    $("#hide_phone_no").click(function () {
        var iframe = $('iframe#emailSignature').contents();
        hideShowPhoneNo(iframe)
   });

    function hideShowPhoneNo(iframe){
        if ($("#hide_phone_no").is(":checked")) {
            iframe.find("#disable_phone").hide();
        } else {
            iframe.find("#disable_phone").show();
        }
    }

});