Question

期望：我想选择图像并单击按钮，然后所选图像应显示在前面，其他图像应显示在选择图像后面。

我在stackoverlfow中找到了类似的解决方案，在点击图像本身时，该图像的z-index被更改，而对于其他图像，z-index设置为0。

let images = document.getElementsByClassName('imgClass');
Array.prototype.forEach.call(images, (img) => {
    img.addEventListener('click', function () {
        Array.prototype.forEach.call(images, (img) => img.style.zIndex = 0);
        this.style.zIndex = 100;
    });
});

但我想在点击按钮时更改所选图像的z-index，所有其他未选择的图像应将z-index设置为0。

以下是我的代码：

这里addOn.level是z-index值，它将所选图像的z-index值设置为100但是当我选择另一个图像时，前一图像的z-index值仍然设置为100。

HTML：

<button onclick="myFunction()">Click me</button>
<script type="text/javascript">
    function myFunction(){  
        if (angular.isDefined(activePortalComponent)) {
            var _viewModel = activePortalComponent.viewModel;
            var addOn = _viewModel.actSlideShow
                            .children[ _viewModel.currentSlide ]
                            .children[ _viewModel.selectedAddon ];

            addOn.level = "100";  
        }
    }

标识所选元素的函数： $ scope.selectElement = function（index）{ $ scope.viewModel.selectedAddon = index; $ scope.viewModel.currentAddOnCommand.command.params.currentA ddOn = index; $ scope.execute（$ scope.viewModel.currentAddOnCommand.command）;

如何在点击按钮时更改图像的z-index值？

0 个答案: