点击后更新 HTML 内容答案

【问题标题】：Update HTML content after click点击后更新 HTML 内容
【发布时间】：2018-09-10 10:00:15
【问题描述】：

我有一个包含 3 个房间的 HTML div。我需要的是在需要时更改任何房间的名称。 “编辑房间名称”按钮使 'contenteditable="false"'。输入所需名称后，我按下“验证名称”按钮，但如您所见，警报消息显示以前的名称，而不是新名称。只有当我再次单击房间名称时，“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>

【问题讨论】：

标签： javascript jquery html

【解决方案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>

【讨论】：

我已经这样做了。问题是这个方法没有得到新的值（我输入的那个）。我需要再次点击房间才能获取值，查看演示
您需要的是，当您更新其中一个房间名称并单击“验证名称”时，您会获得新值？
这正是我所需要的！
你检查了我的 jsfiddle 例子吗？
PostData 函数中的“nameTag”参数应包含“$("[data-room-id="+idTag+"]").text())”中显示的数据。感谢您的宝贵时间，我找到了答案

【解决方案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>

【讨论】：

【解决方案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!');
}

【讨论】：