Question

我被困在这里..试图显示一个div，其类名与已检查的输入元素的id相匹配。

这是我到目前为止所得到的，出了什么问题？...

HTML：

<input type="radio" id="one" name="choice" checked />
<input type="radio" name="choice" id="two"/>
<div class="one">
    Hello!
</div>
<div class="two">
    Goodbye!
</div>

jQuery的：

$('input').click(function(){

    var currentElement = $(this).parent().find('input:checked').id;

    $(document).getElementsByClassName(currenElement).show();

});

CSS：

div{
    display: none;
}

Answer 1

您正在将jquery与javascript混合使用 -

试试这个 -

$('input').click(function(){
    var id = $(this).parent().find('input:checked').attr('id');
    $('.' + id).show()
});

Answer 2

尝试

//use change event
$('input').change(function () {
    //hide all other inputs other than the target one
    $('div').hide().filter('.' + this.id).show()
}).filter(':checked').change(); //to initialize the initial display

演示：Fiddle

Answer 3

jQuery对象中没有属性id。要获取元素的ID，您需要attr('id')：

var currentElementId = $(this).parent().find('input:checked').attr('id');

然而，整个过程可以在不混合使用JS和jQuery的情况下完成：

$('.' + currentElementId).show();

因此，假设您的方法没有错误 - 我们将获取已检查输入元素的ID，然后查找类名称与我们刚刚获取的ID相同的元素，然后显示该类的所有元素。

以下是您的工作示例：http://jsfiddle.net/N8yVt/1/

（请注意，我已添加了隐藏功能，因此您可以看到Hello或Goodbye）

查找ID和类之间的匹配

3 个答案: