element.id未被识别为变量名

Question

正在与此作斗争。我有一些图像显示为缩略图。当用户点击其中一个缩略图时，我希望图像在另一帧中以大尺寸显示(svg格式(。

在我的html中，我有：

<div class="inner-fyt bottom-left">
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 255 378" style="enable-background:new 0 0 255 378;" xml:space="preserve">
<path id="userselectedillustration" class="st0" d="M0,256.6c5,0.6,9.8,1.8,14.6,3.4c3.6,1.3,9.4,4.2,14.6,7.1c5,2.8,9.1,5.1,15.3,6.8c2.3,0.6,4.4,0.8,6.8,1.3 c7.2,1.5,11.4,3.2,11.8,2.4c0.4-0.8-3.6-3.7-7.1-6.1c-6-4.1-12.5-8.3-17.3-11.9c-4-3.1-12-12.8-18.4-22.7 c-4.7-7.2-9.1-16.1-13.1-26.5c-1.6-4.1-3.5-9.9-3.1-17.3c0.4-7.6,2.6-12.5,5-15.9c2-2.8,4.5-5.1,7.5-6.9c4.6-2.7,9-3,10.5-2.7" />
</svg>
</div>

然后：

<div class="container customization_divider illustrations_thumbnails_container">
<label for="illustration">Pick an illustration</label><br />
<img id="ticket" src="thumbnailsticket_thumbnail.png" onclick=illustrationselection(this) class="img-thumbnail illustration_thumbnail" alt="ticket">
<img id="baby_feet" src="thumbnailsbaby_feet_thumbnail.png" onclick=illustrationselection(this) class="img-thumbnail illustration_thumbnail" alt="baby_feet">
</div>

然后在Javascript文件中：

var ticket = "M14.1,152.9c3.2-0.9,6-2.8,7.8-5.4c1.5-2.2,2.2-4.4,2.2-5.3c0-1.1-0.2-1.7,0.2-2.6c1-2.1,4.4-2.3,6.9-2.6 c1.7-0.2,5.5-1.6,8.7-2.7c2.6-0.9,4.8-2,7.4-3.1c4.6-1.9,9-3.2,14.1-4.6c15.1-4.1,30.4-8.6,44.3-11.8c6.4-1.5,12.7-2.8,19.1-4.1 c13.8-2.7,27-4.6,40.9-7.2c7.4-1.4,16.1-2.3,18.4"
var baby_feet ="M0,256.6c5,0.6,9.8,1.8,14.6,3.4c3.6,1.3,9.4,4.2,14.6,7.1c5,2.8,9.1,5.1,15.3,6.8c2.3,0.6,4.4,0.8,6.8,1.3 c7.2,1.5,11.4,3.2,11.8,2.4c0.4-0.8-3.6-3.7-7.1-6.1c-6-4.1-12.5-8.3-17.3-11.9c-4-3.1-12-12.8-18.4-22.7 c-4.7-7.2-9.1-16.1-13.1-26.5c-1.6-4.1-3.5-9.9-3.1-17.3c0.4-7.6,2.6-12.5"
function illustrationselection(el){
//retrieve the clickedthumbnail ID
var clickedillustration=el.id;
//use the id as variable to set the svg path (ie if ticket is clicked, then use var ticket)
$("#userselectedillustration").attr("d", clickedillustration);}

当我console.log(点击图示(时；门票"；或"；baby_feet"(没有引号(所以这似乎是"；工作；但当我console.log($("#userselectedillustration"(.attr("d"((时，返回为空。

本质上，问题是我如何传递我的el.id以被识别为用于设置"；d"；属性

Answer 1

id不会神奇地映射到变量名。您实际上只是将字符串作为属性。

您需要引用变量。最简单的方法是一个物体。

const settings = {
ticket : "M14.1,152......",
baby_feet : "M0,256......",
};

然后你可以用你的id 引用对象

$("#userselectedillustration").attr("d", settings[clickedillustration]);