Question

从淘汰观察阵列中，我在浏览器窗口中显示图像列表。当用户点击图像时，我希望图像弹出（更大）以便更好地观看，然后可以再次点击图像以解除图像。

我在很大程度上得到了这个......但是。弹出窗口始终显示第一张图像。

HTML

<div data-bind="visible: favouritesArrayVisible">
<div class="panel-heading">
    <h2 class="panel-title">Your favourites as cameras for display</h2>
</div>
<div data-bind="foreach: favouritesWithCamerasArray">
    <div class="panel panel-wrapper" style="height=260px; width=%;">
        <div class="panel-body" style="display:inline-block text-align:left;">

                <a href="#" data-bind="click: $parent.overlayImageOpen">
                    <img class="camera" data-bind="attr : {src: fields.url.value}, {alt: fields.title.value}"/>
                </a>
                <div id="overlay"></div>
                <div id="popup">

                    <a href="#" data-bind="click: $parent.overlayImageClose">
                        <img class="cameraPopup" data-bind="attr : {src: fields.url.value}, {alt: fields.title.value}"/>
                        <center><span data-bind="text: fields.title.value"></span></center>
                    </a>
                </div>

            <h4><span data-bind="text: fields.title.value"></span></h4>
            <p><span data-bind="text: fields.url.value" style="word-wrap: break-word;"></span></p>

            <div data-bind="if: fields.location.value">
                <p><span data-bind="text: fields.location.value.longitude"></span>,<span data-bind="text: fields.location.value.latitude"></span></p>
            </div>

            <button data-bind="click: $parent.deleteFavouriteCameraByCamreaRecord" class="btn btn-primary pull-right">Delete Favourite</button>

        </div>
    </div>
</div>

支持JavaScript

        self.overlayImageOpen = function(camera) {
        console.log('Yes overlayImageOpen >' + camera.fields.title.value +'<');
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "block";
        popup.style.display = "block";
    }

    self.overlayImageClose = function() {
        console.log('Yes overlayImageClose');
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "none";
        popup.style.display = "none";
    }

就像overlayImageOpen和overlayImageClose绑定到数组中的第一个项目一样。我想我想要它们动态绑定或类似的东西???

大卫

Answer 1

您有多个具有相同ID的弹出窗口 - 因此每次调用一个弹出窗口时，getElementById将始终引用页面上定义的第一个弹出窗口。

一种修复方法，可以在第一个示例中使用事件，即在点击事件内部传递：

<div id="overlay" class="popup"></div>
<div id="popup" class="popup-overlay">

和你的js，你传递一个新的论点并使用它：

self.overlayImageOpen = function(camera, event) {
   var overlay = event.target.parentNode.parentNode.parentNode.getElementsByClassName('popup-overlay')[0];
   var popup = event.target.parentNode.parentNode.getElementsByClassName('popup')[0];

   overlay.style.display = "block";
   popup.style.display = "block";
 }

这不太理想，您也可以在图片点击中传递数据属性，然后将其传递给弹出窗口。

为了提高性能，我只使用一个弹出窗口的模板，然后只传递数据 - 比如图像本身。然后你就不会有所有重复，这会减慢你的渲染时间。

Answer 2

好的，我让这个工作了。这完全是关于绑定...... 所以OPEN需要将图像（相机）作为参数传递到Javascript中。然后使用对我们想要图像的相机的特定引用来操纵弹出式html代码（替换它）。

关闭图像有点棘手，因为没有任何动态绑定（我到目前为止已找到）。因此我保留了原来的绑定。然后我在“A href”中添加了一个ID =并替换了内部代码。这意味着close可以正确绑定回java脚本。

在代码中更容易看到。

HTML

<div data-bind="visible: favouritesArrayVisible">
            <div id="overlay"></div>
<div class="panel-heading">
    <h2 class="panel-title">Your favourites as cameras for display</h2>
</div>
<div data-bind="foreach: favouritesWithCamerasArray">
    <div class="panel panel-wrapper" style="height=260px; width=%;">
        <div class="panel-body" style="display:inline-block text-align:left;">

                <a href="#" data-bind="click: $parent.overlayImageOpen">
                    <img class="camera" data-bind="attr : {src: fields.url.value}, {alt: fields.title.value}"/>
                </a>
                <div id="popup">
                    <a href="#" data-bind="click: $parent.overlayImageClose" id="popupimage">
                        <img class="cameraPopup" data-bind="attr : {src: fields.url.value}, {alt: fields.title.value}"/>
                        <center><span data-bind="text: fields.title.value"></span></center>
                    </a>
                </div>

            <h4><span data-bind="text: fields.title.value"></span></h4>
            <p><span data-bind="text: fields.url.value" style="word-wrap: break-word;"></span></p>

            <div data-bind="if: fields.location.value">
                <p><span data-bind="text: fields.location.value.longitude"></span>,<span data-bind="text: fields.location.value.latitude"></span></p>
            </div>

            <button data-bind="click: $parent.deleteFavouriteCameraByCamreaRecord" class="btn btn-primary pull-right">Delete Favourite</button>

        </div>
    </div>
</div>

的Javascript

        self.overlayImageOpen = function(camera) {
        console.log('Yes overlayImageOpen >' + camera.fields.title.value +'<');
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");

        var html = "<a href=\"#\" data-bind=\"click: $parent.overlayImageClose\">";
        html += "<img class=\"cameraPopup\" src=\"" + camera.fields.url.value + "\" " + "alt=\"" + camera.fields.title.value + "\" />";
        html += "<center>" + camera.fields.title.value + "</center>";
        html += "</a>";

        document.getElementById("popupimage").innerHTML = html;

        overlay.style.display = "block";
        popup.style.display = "block";
    }

    self.overlayImageClose = function() {
        console.log('Yes overlayImageClose');
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "none";
        popup.style.display = "none";
    }

难道......是的。有没有更好的方法......我很想知道。

大卫

Knockout JS - 点击数组中的图片

2 个答案: