Javascript: редактировать предварительный просмотр с помощью jquery - PullRequest
Новая
       17

Javascript: редактировать предварительный просмотр с помощью jquery

1 голос
/ 11 августа 2010

У меня есть 2 div, у первого есть метка с отображаемым содержимым, но когда вы нажимаете кнопку «edit», она должна показать вам div = «edit» и содержимое 1-го ярлыка внутри вход, связанный с ним (тот же идентификатор).

С другой стороны, я видел сайты, которые, когда вы вводите что-то внутри этого ввода, оригинальная метка div «preview» обновляется в реальном времени.

Может ли кто-нибудь помочь мне со сценарием? Спасибо! 

<html>
        <body>
                <div id="preview">
                        <label id="companyName" class="workExperience">
                                This is my company
                        </label>
                        <label id="companyCountry" class="workExperience">
                                This is my company Country
                        </label>
                        <input type="button" value="edit"/>
                </div>
                <div id="edit">
                        <label>Company Name: </label>
                        <input type="text" id="companyName" />
                        <label>Company Country: </label>
                        <input type="text" id="companyCountry" />
                </div>
        </body>
</html>

1 Ответ

2 голосов
/ 11 августа 2010

Вы можете использовать что-то вроде ниже.Обратите внимание, что я изменил идентификатор полей, чтобы они были другими.Не рекомендуется назначать нескольким элементам управления на одной странице один и тот же идентификатор.Некоторые браузеры не работают с этим, и это все равно не имеет смысла. 

$(document).ready(
    function()
    {
       $("#companyNameText").keypress(
           function()
           {
               $("#companyNameLabel").html(this.value);
           });

       $("#companyCountryText").keypress(
           function()
           {
               $("#companyCountryLabel").html(this.value);
           });
    });
...