Question

当我将鼠标移到页面上时，页面的一部分是可点击的。如果此部分的类已“完成”，我希望它是灰色且不可点击的。我该怎么做？

我有一些代码如下：

$(document).ready(function() {
    $session_rows = $(".coaching_page .user_session_info .session_info tr[session_id]");

    $session_rows.bind("mouseenter mouseleave", function() {
        $(this).toggleClass("highlighted");
    });

    $(".created_column", $session_rows).add(".session_info_column", $session_rows).click(function() {
        $(window).attr("location", "<?php echo $progress_url ?>/session/" + $(this).parent().attr("session_id"));
    });

    $session_rows.find(".trash_column span.ui-icon-trash").bind("mouseenter mouseleave", function() {
        $(this).toggleClass("highlighted");
    }).click(function() {
        if (confirm("Are you sure you want to delete this Case?")) {
            $(window).attr("location", "<?php echo $remove_url ?>/session/" + $(this).parent().parent().attr("session_id"));
        }
    });
});

这是HTML部分：

<table class="session_info">
    <thead>
        <tr>
            <td class="created_column">Created Date</td>
            <td class="session_info_column" colspan="2">Case Info</td>
        </tr>
    </thead>
    <tbody>
        <?php foreach($sessions as $session) : ?>
        <tr session_id="<?php echo $session->getId() ?>" class="completed">
            <td class="created_column"><?php echo $session->getDateTimeObject('created_at')->format('m/d/Y') ?></td>
            <td class="session_info_column">
                <table>
                    <tr>
                        <td class="info_label">Coach:</td>
                        <td><?php echo $session->getCoachUser()->getFullName() ?></td>
                    </tr>
                    <tr>
                        <td class="info_label"># Contacts:</td>
                        <td><?php echo $session->getCoachingReports()->count() ?></td>
                    </tr>
                    <tr>
                        <td class="info_label">Last Updated:</td>
                        <?php $edit = $session->getMostRecentReportEdit() ?>
                        <td><?php echo $edit ? $edit->getDateTimeObject('created_at')->format('m/d/Y') : '[No Edits Yet]' ?></td>
                    </tr>
                    <tr>
                        <td class="info_label">Total Minutes:</td>
                        <td><?php echo $session->calculateTotalMinutes() ?></td>
                    </tr>
                </table>
            </td>
            <?php if($sf_user->hasCredential(Attribute::COACHING_EDIT_ACCESS)) : ?>
            <td class="trash_column"><span class="ui-icon ui-icon-trash">Remove</span></td>
            <?php endif ?>
        </tr>
        <?php endforeach ?>
    </tbody>
</table>

Answer 1

这可以解决问题：

$('.completed').unbind('click').css('background-color','#999');

Answer 2

当你在onlad上绑定，并且你在运行中灰色/完成时，只需在绑定选择器中排除.completed就不会这样做。

你有两个选择：relpace .bind（）和.live（）或.delegate，并在选择器中排除.completed类，或者在bind中完成排除，就像那样。

$session_rows.bind("mouseenter mouseleave", function() {
        $(this).not('.completed').toggleClass("highlighted");
    });

$(".created_column", $session_rows).not('.completed').add(".session_info_column", $session_rows).click(function() {
    $(window).attr("location", "<?php echo $progress_url ?>/session/" + $(this).parent().attr("session_id"));
});

$session_rows.find(".trash_column span.ui-icon-trash").not('.completed').bind("mouseenter mouseleave", function() {
    $(this).toggleClass("highlighted");
}).click(function() {
    if(confirm("Are you sure you want to delete this Case?")) {
        $(window).attr("location", "<?php echo $remove_url ?>/session/" + $(this).parent().parent().attr("session_id"));
    }
});

编辑：或使用Allen Liu解决方案，我没有想到：）

edit2：你可以简单地使用选择器

$session_rows = $(/*.coaching_page .user_session_info*/ ".session_info tr[session_id]").not('.completed');

检查this fiddle

如何使用Jquery控制修改触发器

2 个答案: