0

好的，所以我正在为 FAQ 页面创建一个调查，而我的 jQuery 将无法识别输入或标签标签中的 id。这是我的 jQuery：

$(document).ready(function() {
    $('.rating').click(function() {
    $('.rating').removeClass('selected');
    ratingClick(this);
});
});

function ratingClick(that) {
        console.log(that.id);
            if (that.id == 'rating4' || that.id == 'rating5') {
                var $form = $('#questions');
                $form.submit(function(){
                $.post($(this).attr('connect.php'), $(this).serialize(), function(response){
                $form.replacewith("VERY NICE");
            },'json');
            return false;
            });
                }
            else {
                $('#getMore').fadeIn();
                $(that).toggleClass('selected');
            }
    }

$(document).ready(function(){
    var $form = $('#questions');
    $form.submit(function(){
    $.post($(this).attr('connect.php'), $(this).serialize(), function(response){
        $form.replacewith("VERY NICE");
    },'json');
return false;
});
});

如您所见，如果此人选择评分 4 或 5，我会尝试提交表单。当我单击 4 或 5 时，它会显示 #getMore div，而不是将其提交到服务器并替换表单与“非常好”。这是表单的 HTML：

<body>
    <div id = "form">
    <form id="questions" action="connect.php" method="post">
    <h2>How helpful is this article?</h2>
    <div class="ratings">
        <input type="radio" name="Q1" id="rating1" value="1"><label class="rating" for="rating1">Not at all helpful</label>
        <input type="radio" name="Q1" id="rating2" value="2"><label class="rating" for="rating2">Not very helpful</label>
        <input type="radio" name="Q1" id="rating3" value="3"><label class="rating" for="rating3">Somewhat helpful</label>
        <input type="radio" name="Q1" id="rating4" value="4"><label class="rating" for="rating4">Very helpful</label>
        <input type="radio" name="Q1" id="rating5" value="5"><label class="rating" for="rating5">Extremely helpful</label>
    </div>
    <div id="getMore">
        <h2>Please tell us why you didn't find this article helpful:</h2>
            <input type='checkbox' name="Q2_1" value="1">Not related to my issue<br/>
            <input type='checkbox' name="Q2_2" value="1">Too complicated explanations<br/>
            <input type='checkbox' name="Q2_3" value="1">Too much information<br/>
            <input type='checkbox' name="Q2_4" value="1">Incorrect information<br/>
            <input type='checkbox' name="Q2_5" value="1">Unclear information<br/>
            <input type='checkbox' name="Q2_6" value="1">Incomplete information<br/>
            <h2>Do you have any other feedback about this article?</h2>
            <p><input type="text" name="Q3" /><p>
        <div id = "submit"><input type='submit' value="Submit" /></div>
    </div>
    </form>
    </div>
</body>

如何使用 id 来定位这些单选按钮中的一个，或者是否有另一种方法可以在不使用 id 的情况下做到这一点？

编辑：JFIDDLE 链接http://jsfiddle.net/amccoy022/uN7zv/

4

3 回答 3

0

您将<label>对象传递给 ratingClick 函数。因此没有“id”属性。但是，您确实具有“for”属性，并且您可以从该属性中获取 ID。

        function ratingClick(that) {
            console.log($(that).attr('for'));
            if ($(that).attr('for') == 'rating4' || $(that).attr('for') == 'rating5') {
                //Code
            } else {
                //Code
            }
        }

而且我知道这可能只是一个示例，但我建议您将<label>项目添加到“getMore” div 中的复选框中。当我无法单击标签以选中复选框时，这只是个人的抱怨。

于 2013-10-29T23:57:34.473 回答
0

您class="rating"在标签标签上，但您的 ratingClick 函数看起来像是假设它已通过<input>标签。这是一个问题。

如果您想要标签上的点击处理程序，请将 移动class="rating"到相关<input>标签。

此外，在这段代码中：

$('.rating').click(function() {
    $('.rating').removeClass('selected');
    ratingClick(this);
});

您正在selected从所有.rating元素中删除该类。如果您只想将其从单击的元素中删除，请执行以下操作：

$('.rating').click(function() {
    $(this).removeClass('selected');
    ratingClick(this);
});

如果您想要输入标签上的点击处理程序，您可以将您的点击处理程序更改为：

$('.ratings input').click(function() {
    $(this).removeClass('selected');
    ratingClick(this);
});
于 2013-10-29T23:21:21.840 回答
0

我认为问题在于你使用这个关键词的方式：

尝试这个：

$(document).ready(function() {
    $('.rating').click(function() {
    $('.rating').removeClass('selected');
    ratingClick($(this));
});
});

function ratingClick(that) {
        console.log(that.prev('input').attr('id'));

var id = that.prev('input').attr('id');

if (id  == 'rating4' || id  == 'rating5') {


// code
}

编辑

如果评级为 4 或 5，则为您的 ok 消息提供附加建议：

不要替换表格。只需将其隐藏并将您的响应消息放在我们的其他 html 元素中。

像这样的东西：

function ratingClick(that) {
       console.log(that.prev('input').attr('id'));
         var info = $("#myinfo");
          var id = that.prev('input').attr('id');

            if (id  == 'rating4' || id == 'rating5') {
                var $form = $('#questions');
                $form.submit(function(){
                $.post($(this).attr('connect.php'), $(this).serialize(), function(response){
                form.hide();
                //$form.replacewith("VERY NICE");
                 info.html(response); // if you now how the response message is
                // or info.html("ok message");
            },'json');
            return false;
            });
                }
            else {
                $('#getMore').fadeIn();
                $(that).toggleClass('selected');
            }
    }
于 2013-10-30T00:15:38.910 回答