Question

我有一个HTML div，其中包含3个房间。我需要的是在需要时更改任何房间的名称。 “编辑房间名称”按钮使“ contenteditable =“ false””。输入所需的名称后，我按“ VALIDATE NAME”按钮，但是正如您所看到的，警报消息显示的是前一个名称，而不是新名称。仅当我再次单击房间名称时，“ nameTag”变量才会刷新并采用新值。我的问题是输入完所需的名称后如何获得值？

下面是演示：

$("#editButton").click(function (){
		    var idTag;
		    var nameTag;
		    alert("DoubleClick the room you want to rename")
		    $(".roomClass").click(function (){
		        $(this).attr('contenteditable', 'true');
		        idTag = $(this).attr("data-room-id");
		        nameTag = $(this).text();
		    })
		    $("#confirmButton").click(function () {
		        PostData(idTag, nameTag);
		    })
		})


function PostData(idTag, nameTag) {
        alert(nameTag + ' with id: ' + idTag + ' was renamed!');
}

<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	 <div class="vertical-menu">
        <h3>ROOM LIST:</h3>
<button id="editButton">EDIT ROOM NAME</button><br>
        <a id="content11" class="roomClass" contenteditable="false" data-room-id="0" style="cursor: pointer;">ROOM1</a><br>
        <a id="content10" class="roomClass" contenteditable="false" data-room-id="9" style="cursor: pointer;">ROOM2</a><br>
        <a id="content9" class="roomClass" contenteditable="false" data-room-id="8" style="cursor: pointer;">ROOM3</a><br>
        <br><br>
        
        <button id="confirmButton">VALIDATE NAME</button>	
        
 
</body>
</html>

Answer 1

您只需使用.text() jquery函数即可获得价值就像：

var room8Value = $("[data-room-id=8]").text();

您可以查看此jsfiddle示例

$("#editButton").click(function (){
    var idTag;
    var nameTag;
    alert("DoubleClick the room you want to rename")
    $(".roomClass").click(function (){
        $(this).attr('contenteditable', 'true');
        idTag = $(this).attr("data-room-id");
        nameTag = $(this).text();
    })
    $("#confirmButton").click(function () {
        PostData(idTag, nameTag);
    })
});


function PostData(idTag, nameTag) {
        alert(nameTag + ' with id: ' + idTag + ' was renamed! to :' + $("[data-room-id="+idTag+"]").text());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	 <div class="vertical-menu">
        <h3>ROOM LIST:</h3>
<button id="editButton">EDIT ROOM NAME</button><br>
        <a id="content11" class="roomClass" contenteditable="false" data-room-id="0" style="cursor: pointer;">ROOM1</a><br>
        <a id="content10" class="roomClass" contenteditable="false" data-room-id="9" style="cursor: pointer;">ROOM2</a><br>
        <a id="content9" class="roomClass" contenteditable="false" data-room-id="8" style="cursor: pointer;">ROOM3</a><br>
        <br><br>
        
        <button id="confirmButton">VALIDATE NAME</button>	
        
 
</body>
</html>

Answer 2

使用var idTag;和var nameTag;作为公共变量，您已经在$("#editButton").click()内部应用了此变量

请检查以下内容：

var idTag;
var nameTag;

$("#editButton").click(function (){
    alert("DoubleClick the room you want to rename")
	$(".roomClass").click(function (){
	    $(this).attr('contenteditable', 'true');
		idTag = $(this).attr("data-room-id");
		nameTag = $(this).text();
    })
	
    $("#confirmButton").click(function () {
	    PostData(idTag, nameTag);
	})
})

function PostData(idTag, nameTag) {
    alert(nameTag + ' with id: ' + idTag + ' was renamed!');
}

<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="vertical-menu">
        <h3>ROOM LIST:</h3>
        <button id="editButton">EDIT ROOM NAME</button><br>
        <a id="content11" class="roomClass" contenteditable="false" data-room-id="0" style="cursor: pointer;">ROOM1</a><br>
        <a id="content10" class="roomClass" contenteditable="false" data-room-id="9" style="cursor: pointer;">ROOM2</a><br>
        <a id="content9" class="roomClass" contenteditable="false" data-room-id="8" style="cursor: pointer;">ROOM3</a><br>
        <br><br>
        
        <button id="confirmButton">VALIDATE NAME</button>
    </div>
</body>
</html>

Answer 3

尝试下面的js代码。

	$("#editButton").click(function (){
		    var idTag;
		    var nameTag;
		    var roomId;
		    alert("DoubleClick the room you want to rename")
		    $(".roomClass").click(function (){
		        $(this).attr('contenteditable', 'true');
		        idTag = $(this).attr("data-room-id");
		        roomId = $(this).attr("id");
		    });
		    $("#confirmButton").click(function () {
		    	nameTag = $('#'+roomId).text();
		        PostData(idTag, nameTag);
		    });
		})


function PostData(idTag, nameTag) {
        alert(nameTag + ' with id: ' + idTag + ' was renamed!');
}

点击后更新HTML内容

3 个答案: