JS从应用于对象的选择选项中获取价值 - 未定义

Question

我有 HTML：

<select id="select">
        <option selected="selected" value="amon_amarth">Amon Amarth</option>
        <option value="arch_enemy">Arch Enemy</option>
        <option value="children_bodom">Children of_bodom</option>
        <option value="dark_tranquillity">Dark tranquillity</option>
        <option value="death">Death</option>
        <option value="ensiferum">Ensiferium</option>
        <option value="korpiklaani">Korpiklaani</option>
        <option value="norther">Norther</option>
        <option value="white_skull">White skull</option>
    </select>
    <button id="play">play</button>

然后我从选择选项中获得价值：

$(document).ready(function() {
  $("select").on('change', function () {
    let value = $(this).val().toString();
    let clicksound  = ss_soundbits('sound/' + music.value);
    $('#play').click(function () {
      // ss_soundbits('sound/' + music.value).playclip();
      clicksound.playclip();
      console.log(music);
      console.log(value);
      console.log(music.value);
    });
  })
});

console.log(music) - 是我的对象，没关系：

Object { amon_amarth: "amon_amarth_the_pursuit_of_vikings_(NaitiMP3.ru).mp3", arch_enemy: "Arch_Enemy-09_Ravenous_(muzroom.online).mp3", children_bodom: "children_of_bodom_are_you_dead_yet_(NaitiMP3.ru).mp3", dark_tranquillity: "dark_tranquillity_-_haven_2000_-_dark_tranquillity_-_rundown_(zf.fm).mp3", death: "death_-_painkiller_gon_nad_dzhudas_prist_(zf.fm).mp3", ensiferum: "ensiferum-ahti_(mp3CC.com).mp3", korpiklaani: "korpiklaani-midsummer-night_(mp3CC.com).mp3", norther: "Norther - Last Breath (ouronlyhope.org).mp3", white_skull: "white-skull-high-treason_(mp3CC.com).mp3", siplyi: "white-skull-high-treason_(mp3CC.com).mp3", … }

console.log(music) - 是我的价值，也可以：norther

但是当我尝试将我的值应用于 Object (music.value) 时，它会显示：未定义

如果我放了它，它仍然有效

<button onclick="clicksound.play()">

并且在我的 js 文件中有以下代码：

let clicksound = ss_soundbits('sound/' + music.amon_amarth);

我做错了什么？我花了一整天的时间来解决这个问题。我可以使用不同的按钮/div 来修复它，但我仍然想了解如何解决当前问题。 谢谢！

Answer 1

如果这是您想要达到的结果，请告诉我：

顺便说一句，令人惊叹的音乐品味 :)

let music = {}

$(document).ready(function() {
  $("select").on('change', function() {
    let value = $(this).val();
    music.value = value;
    // let clicksound  = ss_soundbits('sound/' + music.value);
    $('#play').click(function() {
      // ss_soundbits('sound/' + music.value).playclip();
      // clicksound.playclip();
      console.log(music);
      console.log(value);
      console.log(music.value);
    });
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
    <option selected="selected" value="amon_amarth">Amon Amarth</option>
    <option value="arch_enemy">Arch Enemy</option>
    <option value="children_bodom">Children of_bodom</option>
    <option value="dark_tranquillity">Dark tranquillity</option>
    <option value="death">Death</option>
    <option value="ensiferum">Ensiferium</option>
    <option value="korpiklaani">Korpiklaani</option>
    <option value="norther">Norther</option>
    <option value="white_skull">White skull</option>
</select>
<button id="play">play</button>

Answer 2

访问对象中的值的点表示法仅在您引用实际键本身时才使用。 music.value 表示要检索其键字面上称为“值”的键值对，它不存在。

根据我的评论，您想要的是改用 music[value]，其中 value 是一个存储您想要的引用的变量。

附带说明，您不应该绑定事件处理程序在事件处理程序中：这会导致click 事件绑定到#play 元素每次@987654326 @ 事件被触发，这是非常糟糕的。请参阅下面的重构代码：

let clicksound;

$("select").on('change', function () {
    let value = $(this).val();
    clicksound  = ss_soundbits('sound/' + music[value]);
  });

$('#play').click(function () {
  clicksound.playclip();
});