1

セレクター/コンボボックスが変更されたときに、サイトの画像を変更したいと考えています。Bootply では完全に動作しますが、ローカル環境でもアプリスポットでも変更イベントがキャッチされていないように見えます...

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 に答える