javascript - 在 jQuery 中使用 ID 调用变量

Question

我有大约 40 个色板，每个色板都有一个 ID。单击样本后，下面的图像应该会发生变化，图像中的文本也会发生变化。目前我正在获取 id 并使用它来添加到图像的 URL，如下所示:

$('.swatches').children('img').click(function(){
    var clickedId = $(this).attr("id");

    $('#wallPic').attr('src', '//somepathtogettothisimage/theproductname_' + clickedId');
  })

效果很好!

此外，在我的脚本中，我将所有文本保存为变量，如下所示:

var firstText = "Text for the first image",
    secondText = "Some other kind of text",
    thirdText = "Yet more text that's really different from the other two";

当“文本”被添加到它时，id 匹配变量，所以我假设我可以做类似的事情:

$('.swatches').children('img').click(function(){
    var clickedId = $(this).attr("id");
    var newText = clickedId + "Text"

    $('#wallPic').attr('src', '//somepathtogettothisimage/theproductname_' + clickedId);
    $('#imageText').html(newText);

  })

我假设，在这种情况下，“newText”将引用全局变量(“firstText”、“secondText”、“thirdText”等)。但是，没有骰子。

有没有办法让 ID 引用全局变量来更改文本？有一次我还尝试将新文本变量 ("newText") 转换为字符串，但这也没有用。

Answer 1

更简洁、更易读的解决方案是使用 javascript 对象，如下所示:

var imageTexts = {};
imageTexts['first'] = "Text for the first image";
imageTexts['second'] = "Some other kind of text";
imageTexts['third'] = "Yet more text that's really different from the other two";

然后，在您的 jQuery 中，按如下方式修改该行:

$('.swatches').children('img').click(function(){
    var clickedId = $(this).attr("id");
    $('#wallPic').attr('src', '//somepathtogettothisimage/theproductname_' + clickedId);
    // Reference "imageTexts" with the clickedID (assuming 'first', 'second', etc)
    $('#imageText').html(imageTexts[clickedId]);

  })