0

我正在创建星级评分框...我的 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 文本，
但即使将其分配为静态字符串（如“静态值”）也无法正常工作

4

3 回答 3

1

您必须将父函数中的副本保存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 对象）。使用名为selforthat的局部变量me是一种非常常见的设计模式，允许在本地回调函数中引用原始对象。

于 2013-04-19T08:20:26.227 回答
0

.submit您正在表单的 jQuery 方法上使用回调，因此this很可能不是您认为的那样（将其记录到控制台以查看实际情况）。

Even$(this)在这里不起作用，因为那将是表单本身——调用.val()它是没有意义的。

在此函数中明确选择输入字段，然后它应该可以工作：$("#txtStar").val(…)

于 2013-04-19T08:21:04.573 回答
0

您可以使用 jfriend00 的建议，也可以使用 $.proxy() 将提交处理程序的范围更改为原始“this”值。

frm.submit($.proxy(function(){
    this.val(alamStarBox.text());   // NOW this=your textbox #txtStar
}, this));
于 2013-04-19T08:41:55.130 回答