Question

我正在尝试编辑label上的文字。我想：

显示标签和隐藏文字框。
点击标签：标签获取隐藏，文字框显示我可以编辑文字的位置。
在输入时，文本框应隐藏，标签应显示输入的文本。

以下是示例代码。但它没有按预期工作。

<h4>Editable labels (below)</h4>
<span class="k-link">
<label class="pull-left">Dashboard</label>
<input class="clickedit" type="text" id="731"/>
</span>

Demo

Answer 1

查看此Demo。

从

更改代码

 $('.k-link').on('click', ".clickedit.prev()", function (event) {..

进入

 $('.k-link').on('click', ".pull-left", function (event) {..

为

添加内联css样式

 <input class="clickedit" type="text" id="731" style="display:none"/>

Answer 2

这是你想要的功能吗？

$(document).on('click', '#label', function() {
  var that = $(this);
  that.hide();
  $('#731').removeClass('hidden');
});
$(document).on('focusout', '#731', function() {
  var that = $(this);
  var val = that.val();
  that.hide();
  $('#label').after('<span>' + val + '</span>');
});

.hidden { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h4>Editable labels (below)</h4>
<span class="k-link">
<label id="label" class="pull-left">Dashboard</label>
<input class="clickedit hidden" type="text" id="731"/>
</span>

Answer 3

这有效：

 $(document).ready(function(){

    $(".clickedit").hide()

    $(".pull-left").on("click", function(){
        $(this).hide()
        $(".clickedit").show()
    });

    $(".clickedit").on("blur", function(){
        $(this).hide()
        $(".pull-left").text($(this).val()).show()
    });

});

Answer 4

这是检查它我刚刚编辑了选择器.clickedit.prev（）并将其更改为.pull-left

    $('.k-link').on('click', ".pull-left", function (event) {
    $(this).hide();
    $(this).next().show().focus();
    event.stopPropagation();
    });

http://jsfiddle.net/anisboukhris/qho0uLzv/

Answer 5

可以试试这个：

＆＃13;

  $(document).ready(function(){
$("#f1").hide();
$("#text").hide();
var $curr = $( "#start" );
$curr.css( "background", "#f99" );
$( "button" ).on('click',function() {

  $curr = $curr.prev();// this will go to previous div as you have asked how to get previous element.
	 $curr.show();
});
$( "#label" ).on('click',function() {
	$("#label").hide();
	$("#text").show();
	$( "#text" ).blur(function() {
		$("#label").show();
		$("#text").hide();
		$("#label").html($("#text").val());
	});

});

  });

＆＃13;

 div {
    width: 150px;
    height: 40px;
    margin: 10px;
    float: left;
    border: 2px blue solid;
    padding: 2px;
  }

＆＃13;

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="f1"><span id="label">Came to previous div</span><input type="text" id="text" /></div>

<div id="start"></div>

<p><button>Go to Prev</button></p>

＆＃13;

如何使用jquery“on”选择前一个元素？

5 个答案: