javascript - 如何根据点击将新值存储在具有现有值的变量中？

Question

我正在使用传单制作 map ，单击时，存储在 geojson 属性中的值将填充侧栏中的文本区域。我将使用这些值来构造一个将访问 API 的 URL。我的意图是用户可以单击 class =“selected”的任意三个框，并根据他或她的选择获取 map 上的信息。但我无法通过单击新变量来清除存储在 groupSelected 中的上一个变量。

//This grabs the geojson values and stores into the textarea tags in the sidebar

function checkInfo(e) {
	var properties = e.target.feature.properties;
	$("#nabe-name").html(properties.Name)
	$("#top-group").html(properties.largest)
	$("#second-group").html(properties.second)
	$("#third-group").html(properties.third)
};
//This is where I am stuck:
    $(".selected").on("click" ,function(e) {
	nabe = $("#nabe-name").val();
	var groupSelected= $(".selected").val();
}

<textarea id="nabe-name">Neighborhood</textarea>
<textarea  class ="selected" id="top-group">Top</textarea>
<textarea class ="selected" id="second-group">Second</textarea>   
<textarea class ="selected" id="third-group">Third</textarea>

每次单击不同的文本区域时，我都需要更改 groupSelected 变量。我必须考虑如何关闭函数，因为我需要 AJAX 请求可用的两个变量。

请帮忙。如果不是很明显，我是 JS 新手。 谢谢

Answer 1

你总是得到第一个 .selected 的值元素。使用 this 访问单击的元素点击里面的关键字event handler.

var groupSelected= $(this).val();