在Jquery中输入文本时，请更改锚标记中的文本

Question

Ok, this sounds easy, but I'm having problems trying to identify the anchor tag. The HTML block repeats itself.

<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>

I got the answer I need over here how to show text while typing in textarea in jquery

What I need to know is, how do I make it so that the text in the anchor tag changes? I don't want to put in an ID for all of them. I should be using parent() and siblings(), right?

Answer 1

Try

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

Demo: Fiddle

Note: To be more specific I might add an additional class as shown in this fiddle

Answer 2

You can do this with keyup and html:

$(document).ready(function(){

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

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

    });

});

Where #text is the textarea and #q1 is the anchor:

JSFiddle

Answer 3

You can use:

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

Fiddle Demo

Answer 4

I think the best (because the logic) if you could create a parent around this code (if you can)

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

in the event $(this) is your input

you can use $(this).closest('parent').find('a') to find the for the

Answer 5

尝试使用锚定父级：

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

Answer 6

尝试这个

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