jQuery根據表單輸入的值更改段落span標簽的文本

Question

我在該段的跨度上有一個“ friends-name”類，該類應采用“ input [name =“ friends-first-name”]的值。

我在該段的跨度上有一個“您的名字”類，該類的值應為“ input [name ='您的名字”]。

我的代碼如下：

           <div class="form-message">
                <p>Hey <span class="friends-name">[Friend's First Name],</span></p>
                <p>I wanted to reach out b/c I bumped into a solid company. They do fulfillment - shipping - for rising stars</p>
                <p>I'll let you guys take it from there!</p>
                <p class="your-first-name">[Your First Name]</p>
            </div>


           <form id="referral-form" method="POST">

                    <div class="form-left">
                        <div class="form-fieldset form-fieldset_type-personal">
                            <h3 class="form-fieldsetHeading">Your Info</h2>
                            <input class="form-field" data-bind="value: firstName" type="text" name="your-first-name" placeholder="First Name">
                            <input class="form-field" data-bind="value: lastName" type="text" name="your-last-name" placeholder="Last Name">
                            <input class="form-field" data-bind="value: email" type="email" name="your-email" placeholder="Email">
                        </div>
                    </div>

                    <div class="form-right">
                        <div class="form-fieldset form-fieldset_type-friends">
                            <h3 class="form-fieldsetHeading">Friend's Info</h2>
                            <div data-bind="foreach: friends">
                                <div class="form-friend">
                                    <input class="form-field" data-bind="value: firstName" name="friends-first-name" type="text" placeholder="First Name">
                                    <input class="form-field" data-bind="value: lastName" name="friends-last-name" type="text" placeholder="Last Name">
                                    <input class="form-field" data-bind="value: company" name="friends-company" type="text" placeholder="Company">
                                    <input class="form-field" data-bind="value: email" name="friends-email" type="email" placeholder="Email">
                                </div>
                            </div>

                        </div>
                    </div>
            </form>

有什么辦法使用jQuery嗎？

Answer 1

如果要在每個用戶輸入上更新它，請使用keyup事件。

當用戶釋放鍵盤上的鍵時， keyup事件發送到元素。 它可以附加到任何元素，但是事件僅發送到具有焦點的元素。

嘗試這個：

 $('[name="your-first-name"]').on('keyup', function() { $('.your-first-name').text(this.value); }); $('[name="friends-first-name"]').on('keyup', function() { $('.friends-name').text(this.value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="form-message"> <p>Hey <span class="friends-name">[Friend's First Name],</span> </p> <p>I wanted to reach out b/c I bumped into a solid company. They do fulfillment - shipping - for rising stars</p> <p>I'll let you guys take it from there!</p> <p class="your-first-name">[Your First Name]</p> </div> <form id="referral-form" method="POST"> <div class="form-left"> <div class="form-fieldset form-fieldset_type-personal"> <h3 class="form-fieldsetHeading">Your Info</h3> <input class="form-field" data-bind="value: firstName" type="text" name="your-first-name" placeholder="First Name"> <input class="form-field" data-bind="value: lastName" type="text" name="your-last-name" placeholder="Last Name"> <input class="form-field" data-bind="value: email" type="email" name="your-email" placeholder="Email"> </div> </div> <div class="form-right"> <div class="form-fieldset form-fieldset_type-friends"> <h3 class="form-fieldsetHeading">Friend's Info</h3> <div data-bind="foreach: friends"> <div class="form-friend"> <input class="form-field" data-bind="value: firstName" name="friends-first-name" type="text" placeholder="First Name"> <input class="form-field" data-bind="value: lastName" name="friends-last-name" type="text" placeholder="Last Name"> <input class="form-field" data-bind="value: company" name="friends-company" type="text" placeholder="Company"> <input class="form-field" data-bind="value: email" name="friends-email" type="email" placeholder="Email"> </div> </div> </div> </div> </form> 

在這里擺弄

Answer 2

如果要輸入文本。

$("span.friends-name").text($("input[name='your-first-name']").val());