Question

我在页面中有多个复选框及其关联的textareas用于评论。因此，当我选中复选框时，应显示其实际文本区域。

但这些textareas不是这些复选框的直接兄弟。因此，我需要将data-attr *提供给textareas值，与这些复选框的id相同，以识别它。

但是如何获取关联父级的子元素（textareas）（复选框。）。以下是我想要实现的目标。

id = $(this).attr('id') //gets id of checkbox.

child_elem = $('textarea').attr('[data-comments="'+id+'"]') //To identify and return the textarea which has data-comments = id of checkbox.

还有任何jquery插件具有相同的功能，因此它可以是通用的并且可以重复使用，因为我必须使用其他元素（如选择框，单选按钮等）来实现相同的功能。

Answer 1

您可以使用data和filter方法：

child_elem = $('textarea').filter(function(){
   return $(this).data('comments') === id;
})//now you can bind here 
//for example
.addClass('co');

Answer 2

您需要将其用作选择器attribute equals selector

child_elem = $('textarea[data-comments="' + id + '"]')
//same using filter child_elem = $('textarea').filter('[data-comments="' + id + '"]')

您的代码将尝试从页面的第一个文本区域返回名为[data-comments="<id>"]的属性值，

Answer 3

如果要在选中复选框时显示文本区域并在未选中时隐藏它，可以尝试此操作

<强> HTML

<input type="checkbox" id="chckbx" /> this is a checkbox 
<input type="textarea" id = "txtbox"  value="textarea value" />

<强>的jQuery

$("#txtbox").hide();
$("#chckbx").change(function() {
    if($(this).is(':checked')) {
    $('#txtbox').show();
    }
    else
    {
        $("#txtbox").hide();
    }

});

这是一个工作小提琴https://jsfiddle.net/Ujwal_15/C5WxK/1351/

如果有帮助，请告诉我。

由于

获取元素传递变量名作为属性值

3 个答案: