输入值为空时显示最后一个字符串？

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

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

基本上，这是什么，无论用户在输入框中键入什么内容，它都将显示在锚标记中。

现在，我面临的问题是，当用户键入内容并决定删除输入框中的内容时，anchor标签将不再包含内容。 理想情况下，只要输入框处于焦点状态，它就应始终显示先前的内容。 我希望我对问题的描述足够清楚...

这是JSFiddle的链接http://jsfiddle.net/SpLsZ/

Answer 1

我已经更新了您的小提琴，请检查： http : //jsfiddle.net/SpLsZ/2/

我在您的锚标记中放置了一个数据变量value 。 当您的文本内容更改时，我现在正在检查它是否具有值。 如果不是，那么我正在检索数据value并将其作为文本值插入。

<a href="#q1" 
    data-toggle="collapse" 
    data-parent="#accordion" 
    data-value="Question 1"
>Question 1</a>

$('.panel-body input').keyup(function () {
   var header = $(this).closest('.panel-collapse').prev('.panel-heading').find('a');

   if(this.value == "") {
      header.text(header.data("value"));
   } else {
      header.text(this.value);
   }
});

Answer 2

尝试这个：

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

工作小提琴

Answer 3

工作小提琴： http : //jsfiddle.net/SpLsZ/4/

像这样更改您的HTML标记：

<a data-toggle="collapse" data-parent="#accordion" href="#q1">
    <span class="question">Question 1</span>
    <span class="answer"></span>
</a>

这样，您不必担心存储任何值。 而您的JavaScript可以：

$('.panel-body input').keyup(function () {
    var $link = $(this).closest('.panel-collapse').prev('.panel-heading').find('a');
    var $question = $link.find('.question');
    var $answer = $link.find('.answer');

    if (this.value) {
        $question.hide();
        $answer.text(this.value);
    } else {
        $question.show();
        $answer.empty();
    }
});

如果有任何值，则隐藏问题文本并显示答案；如果未输入任何值，则显示问题和空答案。

Answer 4

尝试

$('.panel-body input').keyup(function () {
    $(this).closest('.panel-collapse').prev('.panel-heading').find('a').text(this.value);
}).blur(function () {
    if ($.trim(this.value) == '') {
        $(this).closest('.panel-collapse').prev('.panel-heading').find('a').text(function () {
            return $(this).data('default')
        });
    }
});
$('.panel-heading a').each(function () {
    $(this).data('default', $(this).text());
})

演示： 小提琴