javascript - onChange 用下拉标题而不是值替换 img src

Question

我有一组单选按钮，单击后会根据单击更改图像。

现在我想根据下拉框选择更改图像。这是我的脚本的一部分。使用“标题”不合适吗？

**此外，我感觉函数中又包含一个函数，这感觉不太对劲...我只是想弄清楚我是否需​​要 .change(function () { 部分是否已被 select 的 onchange 触发？我尝试了使用和不使用，但它仍然没有替换图像。

<script type="text/javascript">
    function doCalc(){
    var roomX = $('#room_str').val();
    var otherroomX = $('#other_room').val();
    var qtyX = $('#qty_str').val();
    // etc. etc..
    // below is code that pertains to what i'm trying to do 

    var imgFldr2 = '/wp-content/uploads/2012/07/';
    var imagename = $('#laserlite_color option:selected').attr('title');
    $('#valance-colors-placeholder img').attr('src', imgFldr2 + imagename); 
    });
    // more code

和下拉框...

<select name="laserlite_color" id="laserlite_color" onchange="doCalc();">
    <option value="Gold 301" title="Gold-301.jpg">Gold</option>
    <option value="Chrome 303" title="Chrome-301.jpg">Chrome</option>
    <option value="Light Oak 304" title="Light-Oak-304.jpg">Light Oak</option>
    <option value="Dark Walnut 302" title="Dark-Walnut-302.jpg">Dark Walnut</option>
    <option value="White 307" title="White-307.jpg">White</option>
    <option value="Silk 630" title="Silk-630.jpg">Silk</option>
    <option value="Lilac 688" title="Lilac-688.jpg">Lilac</option>
    <option value="Blush 672" title="Blush-672.jpg">Blush</option>
    <option value="Sage 655" title="Sage-655.jpg">Sage</option>
    <option value="Denim 641" title="Denim-641.jpg">Denim</option>
    <option value="Black Satin 684" title="Black-Satin-684.jpg">Black Satin</option>
</select><br>

<div id="valance-colors-placeholder"><img src="/wp-content/uploads/2012/07/Gold-301.jpg"></div>

编辑:我已经用下面尼克的部分代码更新了我的代码。我只是想解释一下，在这个网站上，我记得程序员说过使用 alert('无论您需要在此处返回什么变量'); 这有助于查看代码的哪一部分是和不是'工作正常。谢谢!!!

Answer 1

是的，您在这里所做的就是每次有人更改选择时添加一个 onchange 事件处理程序。除此之外，事件处理程序不会执行您认为应该执行的操作，因为“这”不是您认为的那样。当您尝试根据“this.title”设置图像时，这可能是未定义的或空字符串，因为“this”指的是选择标签，而不是所选选项。

除此之外，我建议删除 html 中 select 的 onchange 属性，而让 jQuery 在脚本标记中做它擅长的事情:

$().ready(function() {
    $('#laserlite_color').change(function () {
        var roomX = $('#room_str').val();
        // ... the rest of what you're doing in doCalc ...
        var imgFldr2 = '/wp-content/uploads/2012/07/';
        var filename = $('#laserlite_color option:selected').attr('title');
        $('#valance-colors-placeholder img').attr('src', imgFldr2 + filename);
    });
});

对于(ab)使用title属性，您可能会认为选项值和文件名之间应该有严格的关系。如果是这种情况，那么您可以在 select 标签上使用 jQuery 的 val() 。幸运的是，似乎存在从值到图像文件的一对一映射。尝试在文件名行中使用此方法:

var filename = $('#laserlite_color').val().replace(' ', '-') + '.jpg';