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);
});

基本上这样做无论输入框中的用户输入什么，它都会显示在锚标记中。

现在，我面临的问题是，当用户输入内容并决定删除输入框中的内容时，锚标记将不再具有内容。理想情况下，只要输入框被聚焦，它就应该始终显示以前的内容。我希望我对问题的描述足够清楚......

这是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'
    );
});

<强> Working Fiddle

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();
    }
});

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

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());
})

演示：Fiddle

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

4 个答案: