Question

我正在寻找一种方法来调试jquery选择器返回的内容。我尝试过使用toString()，但只返回[object Object]。

我实际上要做的是将回调附加到单选按钮。 onclick 在其中一个按钮上，我想提交封闭表格。

因此我尝试做这样的事情：

$(".rating").stars({
    cancelShow: false,
    callback: function(ui, type, value, event) {
        $(this).closest('form').ajaxSubmit();
    }
});

不幸的是，没有任何事情发生。

以下是我想要做的完整示例：

<script type="text/javascript" src="http://localhost:8000/media/js/jquery.js?v=1.4.2"></script>
<script type="text/javascript" src="http://localhost:8000/media/js/jquery.form.js?v=2.4.3"></script>
<script type="text/javascript" src="http://localhost:8000/media/js/jquery-ui.custom.min.js?v=1.8"></script>
<script type="text/javascript" language="javascript" src="http://localhost:8000/media/js/jquery.ui.stars.js?v=3.0.0b38"></script>
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:8000/media/css/jquery.ui.stars.css?v=3.0.0b38" />        

<body>
 <script type="text/javascript">
    $(function() {
        $(".rating").children().not(":radio").hide();
        $(".rating").stars({
            cancelShow: false,
            callback: function(ui, type, value, event) {
                alert('NodeName: ' + this.nodeName);
                $(this).each(function() {
                    alert($(this).html());
                });

                alert($(this).length);
            }
        });
    });
 </script>

 <ul class="list">
  <li>
   <form class="rating" id="rating-1" action="/sniphunter/rate/1/" method="post">
    <input type="radio" name="score" value="1" id="rating-1-1" />
    <input type="radio" name="score" value="2" id="rating-1-2" />
    <input type="radio" name="score" value="3" id="rating-1-3" />
    <input type="radio" name="score" value="4" id="rating-1-4" />
    <input type="radio" name="score" value="5" id="rating-1-5" />
    <input type="submit" value="Rate"/>
   </form>
  </li>
 </ul>
</body>

Answer 1

您可以使用.length查看是否找到了任何内容（最常见的情况），如下所示：

$(".rating").stars({
  cancelShow: false,
  callback: function(ui, type, value, event) {
    alert($(this).closest('form').length);
    $(this).closest('form').ajaxSubmit();
  }
});

还有其他选项，例如，如果您想迭代每个选项并吐出它的html，那么您就知道它发现了什么，您可以使用.each()和.html()：

$(".rating").stars({
  cancelShow: false,
  callback: function(ui, type, value, event) {
    $(this).closest('form').each(function() {
      alert($(this).html());
    });
    $(this).closest('form').ajaxSubmit();
  }
});

这是几十个中的两个快速示例，但通常.length显示问题，例如this不是你想要的那个回调。

Answer 2

我下载了Star Rating Widget（它看起来与您正在使用的相同）并进行了一些挖掘......星星插件完全删除了单选按钮并用div和链接替换它们。选择星形时，它会将值保存在表单内的隐藏输入中。

所以，在弄乱它之后，我发现你可以使用ui.$form进入表单，所以试试这个：

$(function(){
    $(".rating").children().not(":radio").hide();
    $(".rating").stars({
        cancelShow: false,
        callback: function(ui, type, value, event)
        {
            alert( ui.$form.attr('id') );  // alerts the form ID
            ui.$form.ajaxSubmit();
        }
    });
});

编辑：哦，如果你想访问你原来的单选按钮，它们也会被保存到ui.$rboxs内的ui对象中。以下代码段将提醒原始单选按钮的ID：

$(function(){
    $(".rating").children().not(":radio").hide();
    $(".rating").stars({
        cancelShow: false,
        callback: function(ui, type, value, event)
        {
            alert( ui.$rboxs[(value-1)].id );
        }
    });
});

Answer 3

使用jQuery.alert（）

调试/显示jQuery选择

我正在学习jQuery，这是我用来帮助我调整选择的工具。您可以使用代码将其链接起来，然后查看选择内容。

.alert（）=＆gt;在选择中列出了每个元素的第一个HTML标记。

请参阅下面的示例。请注意.find（）：=＆gt;之后的 .alert（） JsFiddle

$(".item-b").find("li").alert("MY MESSAGE").css("color", "red");

警告框可能如下所示：
（在我得到10分之前不能张贴图片）

[想象一下列出一些元素的警告框]

这是工具：

(function ($) {
    // Lists out each element's first tag in alert box, chainable
    $.fn.alert = function (message) {
        if (typeof message === 'undefined') message = "";
        this.each(function () {
            message += "\n" + this.outerHTML.match(/<[a-z]+\b(?:[^'">]*|"[^"]*"|'[^']*')*>/)[0];
        });
        console.log(message);
        alert(message);
        return this;
    };
}(jQuery));

我是新手，所以欢迎任何建设性意见......

调试jQuery选择器的返回值

3 个答案:

使用jQuery.alert（）