Question

我正在制作星级评估框...... 我的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文本的文本框值但它甚至无法分配静态字符串，如“静态值”

Answer 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对象）。使用名为self或that或me的局部变量是一种非常常见的设计模式，允许在本地回调函数中引用原始对象。

Answer 2

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

即使$(this)也不会在这里工作，因为那将是表单本身 - 并且调用.val()就没有意义。

在此函数中显式选择输入字段，然后它应该起作用：$("#txtStar").val(…)

Answer 3

您可以使用jfriend00的建议，也可以使用$ .proxy（）将提交hanlder的范围更改为原始的“this”值。

frm.submit($.proxy(function(){
    this.val(alamStarBox.text());   // NOW this=your textbox #txtStar
}, this));

jquery插件设置此值

3 个答案: