Change text in the anchor tag while typing in text input in 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' );