我正在创建星级评分框... 我的 php 页面如下所示
<html>
<head>
<script src='jquery.js'></script>
<script src='alamStars.js'></script>
<script>
$().ready(function(){
$("#txtStar").alamStar();
});
</script>
</head>
<body>
<?php
if(isset($_GET[]))
{
echo $_GET['txtStar'];
}
?>
<form>
<input type='text' name='txtStar' id='txtStar'>
<input type='submit'>
</form>
</body>
</html>
我的插件代码如下
;(function ($) {
$.fn.alamStar = function (options) {
var defaultVal = {
img: '../images/start_rating.png',
width: 105,
height: 120
}; //end array of default values
var obj = $.extend(defaultVal, options);//overwrite default values if there
this.after("<div id='alamStarBox' stars='"+this.val()+"'></div>");//dynamically create div
var alamStarBox=$("#alamStarBox");//assign alamStarBox to a variable
alamStarBox.html(this.val());//set initial value from textbox
alamStarBox.css({
'color' : 'red',
'background-image' : 'url('+obj.img+')',
'max-width' : obj.width+"px",
'max-height' : obj.height+"px",
'overflow' : 'hidden'
});//end styling css to alamStarBox
alamStarBox.mousemove(function(e){
var l=alamStarBox.offset().left;//Left value of alaStarBox
var c=parseInt(e.pageX)+21;//current-position
if(c>(parseInt(l)+parseInt(10)))
{
$(this).html("0");
$(this).css('background-position-Y','0px');
}
if(c>(parseInt(l)+parseInt(30)))
{
$(this).html("1");
$(this).css('background-position-Y','-20px');
}
if(c>(parseInt(l)+parseInt(50)))
{
$(this).html("2");
$(this).css('background-position-Y','-40px');
}
if(c>(parseInt(l)+parseInt(70)))
{
$(this).html("3");
$(this).css('background-positionY','-60px');
}
if(c>(parseInt(l)+parseInt(90)))
{
$(this).html("4");
$(this).css('background-positionY','-80px');
}
if(c>(parseInt(l)+parseInt(110)))
{
$(this).html("5");
$(this).css('background-positionY','-100px');
}
});//end moue move function
alamStarBox.mouseout(function(){
var p=parseInt($(this).attr("stars"))*20;
$(this).css('background-positionY','-'+p+'px');
$(this).html($(this).attr("stars"));
});//end function alamStarBox mouseOut
alamStarBox.click(function(){
$(this).attr("stars",$(this).text());
});//end function alamStarBox click
var frm=this.closest("form");
frm.submit(function(){
this.val(alamStarBox.text());//on submit form copy text from starbox to textBox
//////////////////////////////////the above line is not working////////////////
});
};//end alamStar function
})(jQuery);
我想在最后一个名为 frm.submit 的函数中将文本框值设置为等于 div 文本
但它甚至无法工作，甚至为其分配静态字符串，如“静态值”
最佳答案
您必须将父函数中 this 的副本保存到另一个变量中，然后您可以在回调函数中引用该变量，如下所示:
var self = this;
var frm = this.closest("form");
frm.submit(function(){
self.val(alamStarBox.text()); //on submit form copy text from starbox to textBox
});
发生这种情况是因为在提交回调函数中 this 将具有不同的值(很可能是表单 DOM 对象)。使用名为 self 或 that 或 me 的局部变量是一种非常常见的设计模式，允许在局部回调函数中引用原始对象.
关于javascript - jquery 插件设置 this 的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16100217/