Question

我的桌子上装满了复选框。每行是一个事件，每个复选框都是需要为该事件完成的任务。我希望能够用选中它的用户的首字母替换复选框。我还希望能够在单击的复选框下面选择div，这样我就可以显示它，因为它包含我的首字母。我也使用Ruby on Rails。

<td class='completed_box'  id='complete_raw_footage_<%= check_list.id %>'>
        <%= f.check_box :raw_footage_check, :class => 'task_check', :id => 'check_list_raw_footage_check_' + check_list.id.to_s, :category => 'raw_footage', :check_list_id => check_list.id, :style => ("display:none" if check_list.raw_footage_user_id != nil) %>    
        <div class='initials' style="<%= 'display:none;' if check_list.raw_footage_user_id == nil %>">
            <div id='raw_footage_<%= check_list.id %>' title='<%= check_list.event.name %>' class='hidden_dialog'>
                    <b>Task Completed:</b> Raw Footage Recieved <br />
                    <b>Task Completed By:</b> <%= check_list.raw_footage_user_id.name rescue current_user.name %><br />
                    <b>Task Completed At:</b> <%= check_list.raw_footage_date.strftime("%F %r") rescue Time.now.strftime("%F %r") %>
            </div>
            <%= check_list.raw_footage_user_id.initials rescue current_user.initials%> <br />
            <%= check_list.raw_footage_date.strftime("%-m/%d") rescue Time.now.strftime("%-m/%d") %>
        </div>
    </td>

因此，当单击“task_check”类的复选框时，它将只找到下一个类的“首字母”并更改css以显示：inline。如果您需要更多信息，请告诉我。

$('.completed_box').children('.initials').css('display','inline')

这就是我最初使用的，但它会将每个div与类首字母一起显示：inline。

Answer 1

您需要使用this作为起点，然后您可以使用.closest()查找特定的父级，并.find()从那里查找同一父级下的其他下级。使用.closest()和.find()对于更改来说不那么脆弱，如果HTML布局稍后改变一点，因为它们不依赖于父级的确切位置或确切数量 - 它们只依赖于在同一个分支中层次结构。

我不确定我是否完全遵循您的模板化HTML，但也许是这样的：

$(this).closest(".completed_box").find(".initials").css('display','inline')

Answer 2

您可以使用.next()查找下一个元素

$('.task_check').click(function(){
    var $this = $(this);
    if( $this.is(':checked') ) {
        $(this).next('.initials').css('display','inline')
    } else {
        $(this).next('.initials').hide();
    }
})

Answer 3

您也可以使用CSS。

.task_check:checked + .initials{display:inline-block;}

据W3School称，它应该得到每个主要浏览器的支持。

JQuery使用父母查找Div

3 个答案: