Question

我正在尝试整合星级评分窗口小部件 - http://orkans-tmp.22web.net/star_rating/

（我正在使用演示6中的小部件，3之后）

星星点击后，用ui对象

引发事件

 callback: function (ui, type, value) {
                        var arr = ui.$stars.find("a");
   ...

//并且html表单是：

                <form id="rat" action="" method="post">
                        <input type="radio" name="rate" value="1" title="Poor"  />
                        <input type="radio" name="rate" value="2" title="Ahh"  />
                        <input type="radio" name="rate" value="3" title="Good"  />
                        <input type="radio" name="rate" value="4" title="Very Good"  />
                        <input type="radio" name="rate" value="5" title="Superb"/>

                        <input type="submit" value="Rate it!" />
                </form>

当用户点击星星时，它对我有用，我想做的是“伪造”点击行为，例如在我的代码中，点击星星，

据我了解，我有两种选择 1）假冒点击（我尝试了，但它生成帖子给我，我不喜欢） 2）获取ui对象，并调用与click事件相同的逻辑

你能帮我解决问题吗？

（我需要模拟点击事件，因为我想提高可用性通过键盘选择评级..）

感谢。

编辑：

I tried combination of the following, non of them started the animation..
    //$("#rat").stars("select", 5);
    //$("#rat").click();
    //$("#rat:first").trigger("submit");
    // document.forms[0].submit();
    //jQuery('#rat').rating();
    //$('#rat').rating('select', 1);
     //$('#rat').show();

EDIT2：我可以使用以下代码选择星星，但不能启动动画

  $("#rat").stars("select", 0);
  $("#rat").show();

EDIT3 我做过工作，但我仍然没有得到花哨的动画

  function blinkStars(value) {
      $("#rat").stars("select", value);
      $("#rat").show();
      setTimeout(function () { $("#rat").stars("select", 0); $("#rat").show(); }, 600);
            }

Edit4 - 我被要求提供有关ajax调用的更多详细信息，因此它看起来像

           $(function () {
                $("#rat").children().not(":radio").hide();
                // Create stars
                $("#rat").stars({
                    cancelShow: false,
                    callback: function (ui, type, value) {
                        var arr = ui.$stars.find("a");

                        arr.slowEach(100,
                        function () { $(this).animate({ top: "28px" }, 300) },
                        function () {

                            $.post("/Home/Vote", { rate: value}, function (data) {

                                //do some work here..

                            }, "json");


                            $("#loader").fadeIn(function () {


                                $("#loader").fadeOut(function () {
                                    arr.slowEach(100, function () { $(this).animate({ top: 0 }, 300) });
                                });
                            });
                        });
                    }
                });

我将不仅仅是为了让动画更有效......

Answer 1

<form id="rat" action="" method="post">
       <input type="radio" id="rate1" name="rate" value="1" title="Poor"  />
       <input type="radio" id="rate2" name="rate" value="2" title="Ahh"  />
       <input type="radio" id="rate3" name="rate" value="3" title="Good"  />
       <input type="radio" id="rate4" name="rate" value="4" title="Very Good"  />
       <input type="radio" id="rate5" name="rate" value="5" title="Superb"/>

       <input type="submit" value="Rate it!" />
</form> 


<script>
       $("#rate4").click(); //clicks the 'Very Good' star
</script>

Answer 2

您提供的网站链接上的一些内容：

“注意：使用最新的jQuery（1.6），由于对”禁用“属性的attr（）处理的更改，评级控件无法正常工作。只要jQuery UI团队正式下载jQuery 1.6，该修补程序将包含在新版本中。

话虽如此，您现在可以下载＆lt;＆gt; Colin Guthrie分享了，谢谢！ :) 或者，您可以下载＆lt;＆gt;马上。 “

所以如果你在1.6之后使用，你需要确保有补丁并使用它：

$('input[name="rate"][value="3"]').prop("checked",true);

$('#rat input[type="submit"]').click();

如果您在使用1.6之前使用

$('input[name="rate"][value="3"]').attr("checked",true);

$('#rat input[type="submit"]').click();

Answer 3

还有一些选项可以触发你想要的事件：

.change();
.trigger();
.trigger('click');
.trigger('change');
$('#rat').get(0).selectedIndex = 2;

不幸的是，直到星期一我才能测试所有你的：）

如何在Stars Rating Widget中模拟点击事件

3 个答案: