0

我有一张满是复选框的桌子。每行是一个事件，每个复选框是需要为该事件完成的任务。我希望能够用选择它的用户的首字母替换复选框。我还希望能够选择单击的复选框下方的 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”类的复选框时，它将仅找到下一个类“initials”并将css更改为display：inline。如果您需要更多信息，请告诉我。

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

那是我最初使用的，但它会将每个带有类首字母的 div 转换为 display:inline。

4

3 回答 3

1

您需要使用this它作为您的起点，您可以使用它.closest()来查找特定的父级，并.find()从那里找到同一父级下的另一个下属。如果 HTML 布局稍后发生一些更改，则使用.closest()and.find()对更改的影响较小，因为它们不依赖于父级的确切位置或确切数量 - 它们仅依赖于位于层次结构的同一分支中。

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

$(this).closest(".completed_box").find(".initials").css('display','inline')
于 2013-04-26T14:18:43.547 回答
1

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

$('.task_check').click(function(){
    var $this = $(this);
    if( $this.is(':checked') ) {
        $(this).next('.initials').css('display','inline')
    } else {
        $(this).next('.initials').hide();
    }
})
于 2013-04-26T14:19:19.300 回答
0

你也可以用 CSS 来做。

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

根据 W3School 的说法，每个主流浏览器都应该支持它。

于 2013-04-26T14:40:30.203 回答