将 jQuery 变量追加到单击事件处理程序函数

Question

>更新：

完整的脚本。

我有一个脚本来处理一些 Json 数据以使用 HighCharts 生成图形。Json 数据有三个元素：

[{"name":"Room","data":[343,405,406,407]},
{"name":"Temp C","data":[50,50,50,50]},
{"name":"UniqueID","data": 
["GLAZH03431464336298",
"GLAZH04051465483111",
"GLAZH04061464783558",
"GLAZH04071465484869"]
}]

在我的脚本中，我有以下内容：

$(function() {
var categories = [];
var data = [];
var uniqueid = [];
var chart;
$(document).ready(function() {
$.getJSON("chart.php", function(json) {
$.each(json, function(i, el) {
if (el.name == "Room")
categories = el.data;
else if (el.name == "UniqueID") {
uniqueid = el.data;
} else data.push(el);
});
console.log(uniqueid, "UniqueID");
$('#container1').highcharts({
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'x',
marginTop: 40,
marginRight: 30,
marginBottom: 50,
plotBackgroundColor: '#FCFFC5'
},
title: {
text: '<?php echo $_SESSION['
_amember_user ']['
hotel '];?> Room hot water temperatures ',
x: -20, //center
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '10px'
}
},
subtitle: {
text: 'Zoom: hold cursor over chart, hold left mouse button and drag, release button',
x: -20
},
xAxis: {
categories: categories,
labels: {
enabled: false
}
},
yAxis: {
plotLines: [{
value: '<?php echo $row_Rooms['
Hotmax '];?>',
color: '#FF0000',
width: 1,
zIndex: 10,
label: {
text: 'Maximum <?php echo $row_Rooms['
Hotmax '];?> °C',
align: 'center',
x: -10,
y: -5,
style: {
color: '#FF0000'
}
}
}, {
value: '<?php echo $row_Rooms['
HotMin '];?>',
color: '#0000CC',
width: 1,
zIndex: 10,
label: {
text: 'Minimum <?php echo $row_Rooms['
HotMin '];?> °C',
align: 'center',
x: -10,
y: 20,
style: {
color: '#0000CC'
}
}
}],
showFirstLabel: false,
lineColor: '#999',
lineWidth: 0.2,
tickColor: '#666',
tickWidth: 1,
tickLength: 2,
tickInterval: 10,
gridLineColor: '#ddd',
title: {
text: 'Temperature °C',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '10px'
}
},
},
legend: {
enabled: false,
itemStyle: {
font: '11px Trebuchet MS, Verdana, sans-serif',
color: '#000000'
},
itemHoverStyle: {
color: '#000000'
},
itemHiddenStyle: {
color: '#444'
}
},
colors: [
'#009900',
],
plotOptions: {
style: {
textShadow: false
},
column: {
color: '#ff00ff'
},
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
window.top.location.href = "water.php?room="
this.uniqueid;
console.log(uniqueid);
}
}
},
lineWidth: 1,
dataLabels: {
enabled: false,
rotation: 0,
color: '#000000',
align: 'center',
//format: '{point.y:.1f}', // one decimal
y: 0, // 10 pixels down from the top
style: {
textShadow: false,
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
tooltip: {
enabled: true,
crosshairs: [false, true],
positioner: function() {
return {
x: 5,
y: -5
};
},
shadow: false,
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.8)',
formatter: function() {
return 'Room: <b>' + this.x +
'</b> is <b>' + this.y + ' °C</b>';
}
},
credits: {
enabled: false
},
series: data
});
});
});
});

我想做的是传递"uniqueid"并将其附加到事件点击中的 URL 末尾，例如：

click: function() {
window.top.location.href = "water.php?room=" + this.uniqueid;
}

如果我在脚本中使用"console.log(uniqueid，"UniqueID");"并在调试器中检查内容，我会看到：

Array ["GLAZH03431464336298", 
"GLAZH04051465483111", 
"GLAZH04061464783558", 
"GLAZH04071465484869"]

我的问题是如何将 uniqueid 的内容附加到点击事件的 URL 末尾。无论我做什么，我都无法让它工作。

Answer 1

我用jsFiddle重写了你的代码。请参考 Javascript 行 #140console.log(this.uniqueid);，这是在浏览器控制台中打印undefined，这就是您的代码不起作用的原因。

您现在遇到的问题是您无法将温度链接到Highcharts中的唯一Id。请参阅此处的行#38，我正在尝试构造以下JSON并将其设置为Highcharts.series.data行#201。通过这样做，我能够得到行#156中每个点的temperature、room和uniqueId的值。

[{
y: 50,
uniqueid: 'GLAZH03431464336298'
}, {
y: 71.5,
uniqueid: 'GLAZH04051465483111'
}]

Answer 2

给定结果中的数据集将始终是相同的顺序和长度，构建数据对象而不是将它们合并在一起：

$.getJSON("chart.php", function(json) {
$.each(json, function(i, el) {
var collection = [];
if (el.name == "Room" || el.name == "UniqueID")
collection = el.data;
} else {
collection = el;
}
for (var j = 0; j < collection.length; j++) {
data[j] = data[j] || {};
data[j][(el.name || "y").toLowerCase()] = collection[j];
}
});
// high charts code
});

然后在你的点击事件中，看看你是否可以抓取属性房间和唯一ID。我没有使用过高图表，所以我不确定它会在点击事件中为您保留哪些属性。这是要设置断点并检查对象的位置。