javascript表示エラー関数が定義されていません。

Question

Javascriptコード：

<script> 
$(document).ready(function(){ 
$("#verify").click(function(){ 
     if ($("#cval").val()==$("#captcha").text()){ 
      $("#pop").modal("hide"); 
      var id=$("#captcha").attr("data-id"); 
      if (_ths.hasClass("red")){ 
       $.post(base_url+"index.php/myad/removethumbs",{uniqueid:id},function(){ 
       _ths.removeClass("red"); 
       }); 
      } 
      else{ 
      $.post(base_url+"index.php/myad/addthumbs",{uniqueid:id},function(){ 
       _ths.addClass("red"); 
      }); 
      } 
      $("#captcha").val(""); 
     } 
     else{ 
      $("#cval").val(""); 
      $("#cval").attr("placeholder","invalid captcha"); 
     } 
     }); 
function thumb(id,ths){ 
    if (<?=$loggedin?>){ 
     $.post(base_url+"index.php/myad/addthumbs",{uniqueid:id}); 
     $(ths).addClass("red"); 
    } 
    else{ 
     _ths=$(ths); 
     var number = Math.floor(Math.random()*90000) + 10000; 
     $("#captcha").attr("data-id",id); 
     $("#captcha").text(number); 
     $("#pop").modal("show"); 
    } 
    }; 

    function staticthumb(id,ths){ 
    if (<?=$loggedin?>){ 
     if ($(ths).hasClass("red")){ 
      $.post(base_url+"index.php/myad/removethumbs",{uniqueid:id},function(){ 
      $(ths).removeClass("red"); 
      }); 
     } 
     else{ 
     $.post(base_url+"index.php/myad/addthumbs",{uniqueid:id},function(){ 
      $(ths).addClass("red"); 
     }); 
     } 
    } 
    else{ 
     _ths=$(ths); 
     var number = Math.floor(Math.random()*90000) + 10000; 
     $("#captcha").attr("data-id",id); 
     $("#captcha").text(number); 
     $("#pop").modal("show"); 
    }   
    }; 
}); 
</script> 

HTMLコード：

<div class="col-sm-8" id="lists"> 
    <?php if(isset($products)):?> 
      <?php foreach($products as $p):?> 
      <div class="col-md-12"> 
      <div class="product-view row" style="border-bottom:1px solid #eee;margin-bottom:20px;padding:20px 0px 20px 0px;background:#f1f1f1"> 
      <div class="col-sm-3 col-md-3 col-lg-3"> 
       <?php $j = 0;?> 
       <?php foreach($p['checkbox'] as $checkbox):?> 
        <?php if($j == 0):?> 
        <div class="large-image"> 
         <img alt="#" src="<?php echo base_url();?>/uploads/<?php echo $checkbox['Image']?>" /> 
         <div class="image-title"><span class="icon-thumbs-up" onclick="staticthumb(<?php echo $checkbox['UniqueID']?>,this);" id="thumb<?php echo $checkbox['UniqueID']?>" style="font-size:24px;"></span></div> 
        </div> 
        <?php endif;?> 
        <?php $j++;?> 
       <?php endforeach;?> 
      </div> 
      <div class="col-sm-6 col-md-6 col-lg-6"> 
       <div class="product-label"> 
        <h4><?php echo $p["FullName"];?>, <?php echo $p["Area"];?></h4> 
        <h5 style="font-size:14px"><span class="icon-calendar"></span> <?php echo $p["SaleDate"];?></h5> 
        <h5 style="font-size:14px"><span class="icon-clock"></span> 
        <?php for($i = 0; $i < count($p['StartTime']); $i++):?> 
         <?php echo $p['StartTime'][$i].'-'.$p['EndTime'][$i]?> 
        <?php endfor;?> 
        </h5> 
        <div data-balloon-length="fit" data-balloon=" <?php echo $p["Address1"].'-'.$p["Postal"];?>" data-balloon-pos="up" ><h5 style="font-size:14px;width: 100%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;"><span class="icon-home"></span> <?php echo $p["Address1"].'-'.$p["Postal"];?></h5></div> 
        <div data-balloon-length="fit" data-balloon=" <?php echo $p["description"];?>" data-balloon-pos="up" ><h5 style="font-size:14px;width: 100%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;"><span class="icon-file"></span> <?php echo $p["description"];?></h5></div> 
        <!--<div class="panel-group accordion-simple" id="product-accordion"> 
        <div class="panel" style="background:#f1f1f1;"> 
        <div class="panel-heading"> <a data-toggle="collapse" data-parent="#product-accordion" href="#product-address" class="collapsed"> <span class="arrow-down icon-arrow-down-4"></span> <span class="arrow-up icon-arrow-up-4"></span> Address </a> </div> 
        <div id="product-address" class="panel-collapse collapse"> 
         <div class="panel-body"><h5 style="font-size:14px"><?php echo $p["Address1"];?></h5></div> 
        </div> 
        </div> 
        <div class="panel" style="background:#f1f1f1;"> 
        <div class="panel-heading"> <a data-toggle="collapse" data-parent="#product-accordion" href="#product-size" class="collapsed"> <span class="arrow-down icon-arrow-down-4"></span> <span class="arrow-up icon-arrow-up-4"></span> Description </a> </div> 
        <div id="product-size" class="panel-collapse collapse"> 
         <div class="panel-body"><h5 style="font-size:14px"><?php echo $p["description"];?></h5></div> 
        </div> 
        </div> 
       </div>--> 
       </div> 

      </div> 
      <div class="col-sm-3 col-md-3 col-lg-3"> 
       <div class="product-label"> 
        <h4>CATEGORY</h4> 
        <?php foreach($p['checkbox'] as $checkbox):?> 
        <h5 style="font-size:14px"><?php echo $checkbox['Product']?></h5> 
        <?php endforeach;?> 
       </div> 

      </div> 
      </div> 
      </div> 
      <?php endforeach;?> 
    <?php else:?> 
     <h3 style="text-align:center">SORRY THERE IS NO ANY DATA IS AVAILABLE.</h3> 
    <?php endif;?> 

キャプチャ検証のためのHTMLコード：

<div class="modal fade bs-example-modal-sm" id="pop" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> 
    <div class="modal-dialog modal-sm" role="document"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title">Please verify captcha</h4> 
    </div> 
    <div class="modal-body"> 
     <h4 id="captcha" class="text-center"></h4> 
     <hr> 
     <div class="form-group"> 
     <input type="text" class="form-control" name="captcha" id="cval" placeholder="enter captcha"> 
     </div> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary" id="verify">Verify</button> 
    </div> 
    </div> 
    </div> 
    </div> 

私は親指をクリックしていたときに、それは私に機能を表示しますstaticthumbは定義されていません。実際には、私は静的関数を宣言staticthumb関数を書いたことがわかりますが、それでもエラーを表示するので、私を助けてください。今私は無力ですので、私を助けて、私の問題を解決し、事前に感謝してください。

Answer 1

JavaScriptの関数宣言にはFunctional Scopeがあります。つまり、宣言されている関数内からのみアクセスできます。関数内で宣言されていない場合は、グローバルスコープにあります。

staticthumb関数は匿名関数内で宣言しているため、そのスコープ内でのみ使用できます。最も簡単な解決策は、関数宣言を無名関数から外すことです。これはグローバル変数空間を汚染します（これは一般的には避けたい話ですが、それは単独で話題になります）。

TL; DR; staticthumb関数を<script>タグの直後の最初の行に$（document）.readyの前に移動します。