首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >jQuery拖放后CSS不能正确更新,但在检查器中可以

jQuery拖放后CSS不能正确更新,但在检查器中可以
EN

Stack Overflow用户
提问于 2014-11-20 12:18:59
回答 1查看 344关注 0票数 9

我有一个奇怪的问题,下面黑色容器中的项目被拖到上面的网格中。然而,这些项目有这种不透明/橙色的外观。单元格的结构包含一个容器和其中的项。容器单元格在悬停时有橙色背景,但如果我将单元格从黑色容器快速向上移动到网格中,这样悬停就不会显示它工作得很好。

现在它里面的项目有一个叫做"show-game“的类。如果我在Web Inspector中将不透明度从1切换到0,再切换回1,我会得到A1和A4的理想外观。

我的Chrome浏览器有问题吗?IE中不会发生这种情况。看起来风格并没有变得更新。

代码语言:javascript
运行
复制
<td class="item-container draggable-item-container clearfix ui-droppable">
                            <div data-tooltip="" class="item clearfix draggable-active draggable-item show-game ui-draggable tooltip-init" style="background-color: rgb(255, 55, 108);" data-bind="draggableCss: { disabled: $data.Disabled(), matchup: $data.Matchup, invalid: $data.Invalid, current: $data.Current }, draggableGameHandler : { disabled: !$data.Matchup, disabledDrop: $data.Disabled() }, delegatedClick: $root.members.eventSchedule.editGame.open.bind($data, true, ($data.Matchup && $data.Matchup.Type == '@((int)ScheduleType.Pool)'), $parent.Games)">

                            </div>
                        </td>



ko.bindingHandlers.draggableCss = {
        update: function (element, valueAccessor) {

            var values = valueAccessor();

            $(element).toggleClass('ui-droppable-disabled', values.disabled);
            $(element).toggleClass('hide-game', (!values.matchup || !values.matchup.Selected()));
            $(element).toggleClass('show-game', (values.matchup && values.matchup.Selected()) ? true : false);
            $(element).toggleClass('empty', !values.matchup);
            $(element).toggleClass('expand', viewModel.showTeams());

            if (values.editable) {
                $(element).addClass('editable-game');
            }

            if (values.matchup) {

                if (values.matchup.Selected()) {
                    $(element).removeClass('occupied', false);
                }

                if (values.invalid && values.invalid()) {
                    updateElementColors(element, values.matchup.Color, 'invalid');
                }
                else if (values.current && values.current()) {
                    updateElementColors(element, values.matchup.Color, 'current');
                }
                else  {
                    updateElementColor(element, values.matchup.Color, false);
                }

                if (values.matchup.CrossGame)
                    $(element).addClass('cross-game');


            } else if (values.invalid && values.invalid() && !values.disabled) {
                updateElementColors(element, null, 'invalid');
            } else {
                $(element).removeClass('invalid').removeClass('current');
            }
        }
    };

EN

回答 1

Stack Overflow用户

发布于 2014-12-20 01:29:26

如果你使用的是google chrome,打开Inspect选项卡,然后进入"Computed“选项卡。您应该会看到应用于此元素的所有css以及它的设置位置。

检查“隐藏的”css覆盖规则。

如果您希望避免覆盖,请尝试css规则中的"!important“标记。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27031689

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档