Question

我是使用Javascript的新手，我需要帮助处理我正在处理的项目。我知道这个问题可能非常简单，但Javascript不是我的强项，我似乎无法找到自己想要的东西。

我遇到的问题是我需要根据下拉菜单中的选项更改3D模型中呈现的内容。我只是设法得到下拉菜单来更改材料，但是我需要弄清楚如何使用同一下拉菜单中的多种材料。

以下是我现在所拥有的：

HTML代码：

<div class="variant-option" id="js-mat-sel">
  <div class="variant-option-title">Finish: </div>
  <select data-variant-option-name="Finish">
    <option value="none">Select Finish</option>
    <option value="Silver" id="silver">Silver</option>
    <option value="Brass" id="brass">Brass</option>
  </select>
</div>
</div>

JS代码：

 $( "#js-mat-sel" ).bind( "change", function matchange(){
   lapi.applyMaterialToMeshByName( "Silver 1", "Group28884");
 });

目前，当选择下拉菜单中的任何选项时，脚本会从基础材质更改为“Silver 1”。当我在下拉菜单中选择“黄铜”时，我希望它显示材料“黄金1”，当我从下拉菜单中选择“白银”时，只显示“白银1”。

此外，应该注意我使用existing API for the 3D rendering company, Lagoa的衍生物。

[编辑：]

所以，我知道我在这里做错了什么，我只是不知道怎么做我想要的。

还应该注意的是，我从一个较旧的代码形式获得了“Gold 1”和“Silver 1”，这些代码通过多个CSS制作按钮完成了我想要的工作。以下是有效的代码。但是，按钮很大且不方便，将来我需要用更多的材料重新创建这个代码，因此下拉菜单更理想。这是原始代码：

HTML：

<div class="btn-large" id="js-material-btn-1">Gold</div>
<div class="btn-large" id="js-material-btn-2">Silver</div>

JS：

 $( "#js-material-btn-1" ).bind( "click", function(){
   lapi.applyMaterialToMeshByName( "Gold 1", "Group28884");
 }); 
 $( "#js-material-btn-2" ).bind( "click", function(){
   lapi.applyMaterialToMeshByName( "Silver 1", "Group28884");
 });

Answer 1

您硬编码“Silver 1”作为您提交的选项。

您希望从哪里获得“金牌1”？我在你的代码中没有看到它。

Dementic建议正确答案，这就是它的样子。

例如：

<option value="Silver 1" id="silver">Silver</option>
<option value="Gold 1 " id="brass">Brass</option>

和你的js：

$( "#js-mat-sel > select" ).bind( "change", function matchange(){
    lapi.applyMaterialToMeshByName( $(this).val(), "Group28884");
 });

请注意，选项值包含您要发送的实际值。

编辑：您在div上使用.val（），但这只能用于输入/表单元素（即select元素）。您应该将change事件修改为绑定到select元素，如下所示：http://jsfiddle.net/6YBpp/

您还可以更改选择器以选择该div的“select”子元素，我更新了答案以显示...范围不正确

通过下拉菜单激活Javascript命令

1 个答案: