如何在星级小部件中模拟点击事件

Question

我正在尝试集成星星评级小部件 - http://orkans-tmp.22web.net/star_ rating/

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

在星星被点击后，用 ui 对象引发的事件

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

//and html form is:

                <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();

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

  $("#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 的下载，该修复程序将包含在新版本中。

话虽如此，您现在可以下载<>由 Colin Guthrie 分享，谢谢！ :)
或者，您可以下载<>马上。 “

因此，如果您在 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('点击') ;
.trigger('更改') ;
$('#rat').get(0).selectedIndex = 2 ;

不幸的是，我要到周一才能测试。
都是你的:)