1

I would like to change a picture on the site when a selector/combobox changed. 它在 Bootply 中完美运行，但看起来更改事件既没有在本地环境中捕获，也没有在 apppot 中捕获......

这是HTML：

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="/static/js/nbafantasy.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" ></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>
<body>
    Eastern conference
    <div class="form-group">
        <img src="http...">
        <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="11a" name="11a">
            <option>-</option>
            <option>4:0</option>
            <option>4:1</option>
            <option>4:2</option>
            <option>4:3</option>
            <option>3:4</option>
            <option>2:4</option>
            <option>1:4</option>
            <option>0:4</option>
        </select>
        <img src="...">
    </div>
    <div clas

和 JS：

$('#11a').on('change', function (e) {
    console.log('fired');
    if((document.getElementById('11a').value).charAt(0) == "4") {
        document.getElementById("21aimg").src="http....";
    }else{
        document.getElementById("21aimg").src="http.....";
    }
});
4

1 回答 1

0

您必须将事件绑定包装在$(document).ready(fn)块中： 

$(document).ready(function() { // <---ensures that DOM is ready to use
  $('#11a').on('change', function(e) { // <---now it will be bound on target element
    console.log('fired');
    if (this.value.charAt(0) == "4") {
      document.getElementById("21aimg").src = "http....";
    } else {
      document.getElementById("21aimg").src = "http.....";
    }
  });
});
于 2017-04-14T10:56:13.323 回答