Jquery 未激活 onClick for table 元素

Question

$(document).ready(function() {
  $('#ot2').on('click', function() {
    $('#oi1').hide();
    $('#ot1').css('background-color', 'transparent');
    $('#oi2').show();
    $('#ot2').css('background-color', '#C4C4C4');
    $('#oi3').hide();
    $('#ot3').css('background-color', 'transparent');
    $('#oi4').hide();
    $('#ot4').css('background-color', 'transparent');
  });
});

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<table cellspacing=0 cellpadding=0>
  <tr>
    <td style="vertical-align:top">
      <div id="ot1" class="oTankPreviews" style="background:#C4C4C4">
        <div class="tp-vals-a">Tank 1<br><br>{{x.o1Product}} FT</div>
        <div class="tp-vals-b">
          <div class="tp-vals-b-wrapper">
            <div class="ltp-fill" style="height:40px"> </div>
          </div>
        </div>
      </div>
      <div id="ot2" class="oTankPreviews">
        <div class="tp-vals-a">Tank 2<br><br>{{x.o2Product}} FT</div>
        <div class="tp-vals-b">
          <div class="tp-vals-b-wrapper">
            <div class="ltp-fill" style="height:60px"> </div>
          </div>
        </div>
      </div>
      <div id="ot3" class="oTankPreviews">
        <div class="tp-vals-a">Tank 3<br><br>{{x.o3Product}} FT</div>
        <div class="tp-vals-b">
          <div class="tp-vals-b-wrapper">
            <div class="ltp-fill" style="height:56px"> </div>
          </div>
        </div>
      </div>
      <div id="ot4" class="oTankPreviews">
        <div class="tp-vals-a">Tank 4<br><br>{{x.o4Product}} FT</div>
        <div class="tp-vals-b">
          <div class="tp-vals-b-wrapper">
            <div class="ltp-fill" style="height:40px"> </div>
          </div>
        </div>
      </div>
    </td>
    <td style="width:25%; vertical-align:top;background:#C4C4C4">
      <div id="oi1">
        <div style="height:1000px; border-style:solid; border-width:4px; margin-left:20px;position:relative">
          <div class="tp-vals-b-wrap">
            <div class="ltp-fill-large" style="height:470px"></div>
          </div>
        </div>
        <center>
          <font size=60>TANK 1</font>
        </center><br>
        <center>
          <font size=60>{{x.o1Product}} FT</font>
        </center>
      </div>
      <div id="oi2" style="display: none; ">
        <div style="height:1000px; border-style:solid; border-width:4px; margin-left:20px;position:relative">
          <div class="tp-vals-b-wrap">
            <div class="ltp-fill-large" style="height:470px"></div>
          </div>
        </div>
        <center>
          <font size=60>TANK 2</font>
        </center><br>
        <center>
          <font size=60>{{x.o2Product}} FT</font>
        </center>
      </div>
      <div id="oi3" style="display: none; ">
        <div style="height:1000px; border-style:solid; border-width:4px; margin-left:20px;position:relative">
          <div class="tp-vals-b-wrap">
            <div class="ltp-fill-large" style="height:470px"></div>
          </div>
        </div>
        <center>
          <font size=60>TANK 3</font>
        </center><br>
        <center>
          <font size=60>{{x.o3Product}} FT</font>
        </center>
      </div>
      <div id="oi4" style="display: none; ">
        <div style="height:1000px; border-style:solid; border-width:4px; margin-left:20px;position:relative">
          <div class="tp-vals-b-wrap">
            <div class="ltp-fill-large" style="height:470px"></div>
          </div>
        </div>
        <center>
          <font size=60>TANK 4</font>
        </center><br>
        <center>
          <font size=60>{{x.o4Product}} FT</font>
        </center>
      </div>
    </td>
  </tr>
</table>

工作了一段时间，然后被破坏了。我的脚本/html错误在哪里？不知道问题出在哪里。

Answer 1

您的脚本正在按预期工作，问题可能是由于 http 协议浏览器将其识别为不安全，只需更改 url 以使用 https

$(document).ready(function(){
$('#ot2').on('click',function(){
    $('#oi1').hide();
    $('#ot1').css('background-color', 'transparent');
    $('#oi2').show();
    $('#ot2').css('background-color', '#C4C4C4');
    $('#oi3').hide();
    $('#ot3').css('background-color', 'transparent');
    $('#oi4').hide();
    $('#ot4').css('background-color', 'transparent');
});
});

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  
   <table cellspacing=0 cellpadding=0>
        <tr>
            <td style="vertical-align:top">
                <div id="ot1" class="oTankPreviews" style="background:#C4C4C4"><div class="tp-vals-a">Tank 1<br><br>{{x.o1Product}} FT</div><div class="tp-vals-b"><div class="tp-vals-b-wrapper"><div class="ltp-fill" style="height:40px"> </div></div></div></div>
                <div id="ot2" class="oTankPreviews"><div class="tp-vals-a">Tank 2<br><br>{{x.o2Product}} FT</div><div class="tp-vals-b"><div class="tp-vals-b-wrapper"><div class="ltp-fill" style="height:60px"> </div></div></div></div>
                <div id="ot3" class="oTankPreviews"><div class="tp-vals-a">Tank 3<br><br>{{x.o3Product}} FT</div><div class="tp-vals-b"><div class="tp-vals-b-wrapper"><div class="ltp-fill" style="height:56px"> </div></div></div></div>
                <div id="ot4" class="oTankPreviews"><div class="tp-vals-a">Tank 4<br><br>{{x.o4Product}} FT</div><div class="tp-vals-b"><div class="tp-vals-b-wrapper"><div class="ltp-fill" style="height:40px"> </div></div></div></div>
            </td>
            <td style="width:25%; vertical-align:top;background:#C4C4C4">
                <div id="oi1"><div style="height:1000px; border-style:solid; border-width:4px; margin-left:20px;position:relative"><div class="tp-vals-b-wrap"><div class="ltp-fill-large" style="height:470px"></div></div></div><center><font size=60>TANK 1</font></center><br><center><font size=60>{{x.o1Product}} FT</font></center></div>
                <div id="oi2" style="display: none; "><div style="height:1000px; border-style:solid; border-width:4px; margin-left:20px;position:relative"><div class="tp-vals-b-wrap"><div class="ltp-fill-large" style="height:470px"></div></div></div><center><font size=60>TANK 2</font></center><br><center><font size=60>{{x.o2Product}} FT</font></center></div>            
                <div id="oi3" style="display: none; "><div style="height:1000px; border-style:solid; border-width:4px; margin-left:20px;position:relative"><div class="tp-vals-b-wrap"><div class="ltp-fill-large" style="height:470px"></div></div></div><center><font size=60>TANK 3</font></center><br><center><font size=60>{{x.o3Product}} FT</font></center></div>            
                <div id="oi4" style="display: none; "><div style="height:1000px; border-style:solid; border-width:4px; margin-left:20px;position:relative"><div class="tp-vals-b-wrap"><div class="ltp-fill-large" style="height:470px"></div></div></div><center><font size=60>TANK 4</font></center><br><center><font size=60>{{x.o4Product}} FT</font></center></div>                                    
            </td>
        </tr>