Question

我正在尝试根据用户从下拉框中选择的帐户更改用户头像。我写了一些我觉得应该工作的jQuery，因为我用它来做类似的应用程序做同样的事情（用facebook urls而不是twitter）

<select id="twid-4646464" onChange="updateTwPic(4646464);">
  <option value="billpull-1">BillPull</option>
  <option value="billpull1-2">BillPull1</option>
</select>

 function updateTwPic(postid){
    var twhandle = $('#twid-'+postid).val().split('-');
    twhandle = twhandle[0];
    var picurl = "http://api.twitter.com/1/users/profile_image/"+twhandle;
    $('#twpic-'+postid).attr('src',picurl);
 }

Answer 1

如果设置正确，您的代码可以正常运行：http://jsfiddle.net/86nfP/

请注意，我已将onDomReady更改为no wrap (head)。

出了什么问题？ updateTwPic未在全局范围中定义，而是在ready事件处理程序中定义，因此JavaScript无法找到它。
如果你看过控制台，你会看到：

未捕获的ReferenceError：未定义updateTwPic

您可以简单地使用jQuery附加事件处理程序以避免此类问题：

$(function() {
    // this code runs when the DOM is loaded, no matter where it is located
    $('#twid-4646464').change(function() {
        var postid = this.id.split('-')[1],
            picurl = "http://api.twitter.com/1/users/profile_image/"+this.value.split('-')[1];
        $('#twpic-'+postid).attr('src',picurl);
    });
});

您还可以使用data-*属性，这些属性更加清晰：

<select id="twid-4646464" data-postid="4646464">

并在事件处理程序中：

var postid = $.data(this, 'postid');

Onchange不用值更新图像源

1 个答案: