Question

我有一个从JSON文件提取的图像数组，并且标记是具有2或3个值的单独数组。我有一个搜索过滤器，其中onClick它执行一个功能，该功能通过图像标题或图像标签在我的图库中进行搜索。在图像上单击它会打开一个模式对话框窗口，在该窗口中，我有图像的Exif数据和以'，'分隔符显示的图像标签。我需要在exif数据下方的模式对话框中的那些标签被超链接。因此，在使用标签中的一个（例如：dog）时，请按标签名称在我的图库中执行搜索，并显示包含该标签的图像。我的搜索功能是搜索4页，因为我已对所有图像进行了分页。

HTML：

<div class="searchButton">
    <input type="text" id="inputValue"  data-toggle="tooltip"  placeholder="Search by name or #tag">
    <button id="searchBtn" onclick="goToPage(0,limit)" type="button">Search</button>
</div>
<div id="imageContainer"></div>
<div id="myModal" class="modal">
    <img id="current" class="modal-content" />
    <div id="exifResult"></div>
    <div id="map"></div>
    <span id="closeDlg" class="close">Close</span>
</div>

JAVAscript：

newArray= [
    0: {location: "Photos/_DSC0150.jpg", title: "Hotel", id: "image_id_001", tag: Array(3)}
    1: {location: "Photos/_DSC0226.jpg", title: "Fruit Tree", id: "Fruit_Tree", tag: Array(2)}
    2: {location: "Photos/_DSC0442.jpg", title: "Holy Trinity Church", id: "image_id_003", tag: Array(3)}
    3: {location: "Photos/_DSC6927-Е.jpg", title: "The Moon", id: "image_id_004", tag: Array(2)}
    4: {location: "Photos/_DSC7679.jpg", title: "Sunset over a lake", id: "image_id_005", tag: Array(3)}
    ]

function renderImages(data) {
let imageContainer = $('#imageContainer');
    let images= "";
    data.forEach(function (item) {
        images += (`<div class='imgBox'><img id=${item.id} src=${item.location} /><p>${item.title}</p></div>`);
    });

imageContainer.html(images);

function goToPage(pageNum, count) {

    let filter = $("#inputValue").val().toLowerCase();
    let imgIndex = pageNum * count;
    goToItem(filter,imgIndex, count);

}

let images = $(".imgBox img");
        images.click(function() {
            let currentImageTag = $(this).attr('data-category');
            modalContent.attr('src', $(this).attr('src'));

Answer 1

您可以在单击时获取图像的ID，然后找到具有该ID的数组元素，以便可以访问标签。

Reachable hosts

是否可以在模式对话框中超链接图像标签

1 个答案: