在Jquery中輸入文本時，請更改錨標記中的文本

Question

好的，這聽起來很簡單，但是我在嘗試識別錨標記時遇到了問題。 HTML塊會重復自身。

<div class="panel-heading">
  <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#q1">
     Question 1
    </a>
  </h4>
</div>
<div id="q1" class="panel-collapse collapse">
  <div class="panel-body">
    <div class="form-group">
      <label for="inputQ1" class="col-sm-2 control-label">Question</label>
      <div class="col-sm-7">
        <input type="text" class="form-control" id="inputQ1" placeholder="e.g How was our service?">
      </div>
    </div>
  </div>
</div>

我得到了我在這里需要的答案如何在jquery中鍵入textarea時顯示文本

我需要知道的是，如何使錨標記中的文本更改？ 我不想為所有這些輸入ID。 我應該使用parent（）和siblings（），對嗎？

Answer 1

嘗試

jQuery(function ($) {
    $('.panel-body input').keyup(function(){
        $(this).closest('.panel-collapse').prev('.panel-heading').find('a').text(this.value)
    })
});

演示： 小提琴

注意：更具體地說，我可能會添加一個額外的類，如該小提琴所示

Answer 2

您可以使用keyup和html來做到這一點：

$(document).ready(function(){

    $("#text").keyup(function(){

        $("#q1").html($(this).val());

    });

});

其中#text是文本區域，而#q1是錨點：

JSFiddle

Answer 3

您可以使用：

$('#inputQ1').keyup(function(){
    var $this = $(this);
    $this.closest('#q1').prev().find('a').html($this.val());
});

小提琴演示

Answer 4

我認為最好（因為邏輯），如果您可以圍繞此代碼創建一個父對象（如果可以）

<div class="parent">
  <h4>
    <a>...</a>
  </h4>
  <div>
     <input>
  </div>
</div>

如果$(this)是您的輸入

您可以使用$(this).closest('parent').find('a')查找

Answer 5

嘗試使用錨定父級：

$('.panel-title a').text( /* textarea text */ );

Answer 6

嘗試這個

$('.panel-title a').text( 'new text' );