Question

好的，所以我正在为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 LINK http://jsfiddle.net/amccoy022/uN7zv/

Answer 1

您的class="rating"位于label标签上，但您的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);
});

Answer 2

您正在将<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
            }
        }

我知道这可能只是一个例子，但我建议你在“getMore”div的复选框中添加<label>个项目。当我无法点击标签选择复选框时，这只是个人抱怨。

Answer 3

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

试试这个：

$(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，则为您的确定消息提供有条件的建议：

请勿替换表格。只需隐藏它并将您的响应消息放在我们的其他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'); } }

jQuery无法识别<input /> ID

3 个答案: