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 code:
<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">×</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我声明了staticthumb函数,但它仍然显示错误所以请帮助我。现在我很无助所以请帮助我,并尝试解决我的问题,并提前感谢。
答案 0 :(得分:0)
JavaScript中的函数声明具有Functional Scope,这意味着它只能从声明它的函数中访问。如果它未在函数中声明,则它在全局范围内。
您在匿名函数中声明了staticthumb
函数,因此它只能在该范围内使用。最简单的解决方法是将函数声明移出匿名函数,这将污染您的全局变量空间(您通常希望避免这种情况,但这本身就是一个主题)
TL; DR;将您的staticthumb
功能移到$ {(文档).ready之前的<script>
标记后面的第一行。