javascript - 单击 html 页面中的删除图标滚动到页面顶部

问题描述

我是 knockout.js 的新手。我有一个我正在尝试调试的代码。我面临的问题对我来说非常新。删除按钮放置在 div 中，其目的是删除相应的部分。我正在观察一件奇怪的事情。如果页面是 100% 缩放并且页面有 10 个部分。假设 3 个部分可见，7 个部分不可见。单击删除按钮后，从用户视图中隐藏的部分不会被删除。相反，单击这 7 个部分中的删除按钮时，焦点会到达页面顶部。

如果我将缩放比例降低到 60%，则页面上可见 7 个部分，隐藏 3 个部分。现在我可以毫无问题地删除 7 个部分。但是删除对用户不可见的 3 个不起作用。一旦我从顶部删除了几个部分，然后当最后 3 个部分对用户可见时，用户也可以删除这些部分。我不明白可能是什么问题。下面的代码只有一个这样的块。

<div class="well border-editable field-container" data-bind="foreach: fields">
<!-- ko if: !$parent.isApproved && !$parents[1].isCloned -->
    <div class="hover-icon field" data-bind="drag: $parent.reorderField">
        <div class="well well-xs border-bar field-body clearfix" data-bind="event: {mouseleave: closeTooltip}">
            <div class="field-operation" data-bind="visible: id != $parent.editingField().id">
                <span class="field-operation-item">
                    <!-- ko if: $parents[1].status != 'distributed' -->
                    <!-- ko if: type() != 'outcome' && type() != 'cm' && type() != 'am' && type() != 'al'-->
                    <a href="#" class="tooltip_trigger" data-bind="sure: $parent.removeField, btnText: 'Delete', tipText: 'Are you sure?'" data-placement="top" title="Delete" tabindex="0">
                        <i class="icon icon-trash-empty"></i>
                    </a>
                    <!-- /ko -->
                    <!-- ko if: (type() == 'outcome' && !$parents[1].cmField()) || 
                                (type() == 'cm' && !$parents[1].amField()) || 
                                (type() == 'am' && !$parents[1].afField()) ||
                                (type() == 'al' && !$parents[1].alfField()) --><!-- /ko -->
                    <!-- ko if: type() == 'outcome' && $parents[1].cmField() --><!-- /ko -->    
                    <!-- ko if: type() == 'cm' && $parents[1].amField() --><!-- /ko -->    
                    <!-- ko if: type() == 'am' && $parents[1].afField()  --><!-- /ko -->  
                    <!-- ko if: type() == 'al' && $parents[1].alfField()  --><!-- /ko --> 
                    <!-- /ko -->
                    <!-- ko if: $parents[1].status == 'distributed' --><!-- /ko -->
                </span>
            </div>
            <div data-bind="template: { name: 'field-' + type(), data: $data }">
                <!-- ko if: id !== $parents[1].editingField().id -->
                <div class="form-horizontal">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label class="text-primary" data-bind="text: label">Number</label>
                            <p class="help-block" data-bind="text: description"></p>
                        </div>
                        <div class="col-md-3">
                            <div class="fake-text" data-bind="text: value"></div>
                        </div>
                    </div>
                </div>
            <!-- /ko -->
            <!-- ko if: id === $parents[1].editingField().id --><!-- /ko -->
            </div>
        </div>
    </div>
    <!-- /ko -->
<!-- ko if: $parent.isApproved || $parents[1].isCloned --><!-- /ko -->

这是javascript代码：（如果您需要任何其他信息，请告诉我）

    function removeField () {
        var activeSection = _getActiveSection();
        activeSection.removeField(removeFieldModel);
    }
    function _getActiveSection () {
        var activeSectionId = self.activeSectionId();
        var sections = self.displaySections();
        return  _.find(sections, function (section) {
            return section.id == activeSectionId;
        }) || sections[0] || {};
    }
    self.displaySections = ko.pureComputed(function () {
        return _.union(ko.unwrap(self.linkedSections), ko.unwrap(self.sections));
    });

我不确定你们需要什么额外的代码来帮助我调试这个。如果您需要任何其他信息，请告诉我。

这是我要解释的视频演示。视频演示链接

谢谢。

标签： javascripthtmlknockout.js

javascript - 单击 html 页面中的删除图标滚动到页面顶部 - Knockout.js

问题描述

解决方案

推荐阅读