Question

我正在使用引导程序4进行砌体图像显示。将图像悬停在其上时，应在其顶部显示“收藏夹”按钮。我可以将按钮正确地放置在其他项目中，但是通过这种砌体，所有按钮都出现在页面中间的同一位置，而不是出现在相关图像的顶部。

这是我的砌体代码：

var tableId = 'master_DefaultContent_rts_ts3295_s4655_f18821srvgrid_ctl00';
//table with target elements

$(document).ready(function () { //run script when page is loaded
    main();
});

function main() {
    var table = document.getElementById(tableId).getElementsByTagName("tbody")[0];
    var rows = table.getElementsByTagName("tr");

    for (var i = 0; i < (rows.length - 1); i++) {
        var field = rows[i].getElementsByTagName("td")[1];
        var spanElements = field.getElementsByTagName("span"); //target elements

        for (var k = 0; k < spanElements.length; k++) { //apply style for each of them
            var elem = spanElements[k];
            elem.style.fontFamily = "Times New Roman";
            elem.style.fontSize = "14pt";
            elem.style.color = "black";
        }
    }
}

这是砌体的CSS：

var times = [];
var tasks = [];

function addTask(time, fn) {
    var timeArr = time.split(':');
    var cronString = timeArr[1] + ' ' + timeArr[0] + ' * * *';
    // according to https://github.com/node-schedule/node-schedule#cron-style-scheduling
    var newTask = schedule.scheduleJob(cronString, fn);

    // check if there was a task defined for this time and overwrite it
    // this code would not allow inserting two tasks that are executed at the same time
    var idx = times.indexOf(time);
    if (idx > -1) tasks[idx] = newTask;
    else {
        times.push(time);
        tasks.push(newTask);
    }
}

function cancelTask(time) {
    // https://github.com/node-schedule/node-schedule#jobcancelreschedule
    var idx = times.indexOf(time);
    if (idx > -1) {
        tasks[idx].cancel();
        tasks.splice(idx, 1);
        times.splice(idx, 1);
    }
}

function init(tasks) {
    for (var i in tasks){
        addTask(i, tasks[i]);
    }
}

init({
    "10:00": function(){ console.log("It's 10:00"); },
    "11:00": function(){ console.log("It's 11:00"); },
    "13:00": function(){ console.log("It's 13:00"); }
});

app.post('/addTask', (req, res) => {
    if (!req.body.time.match(/^(0[0-9]|1[0-9]|2[0-3]|[0-9]):[0-5][0-9]$/)) {
        // regex from https://stackoverflow.com/a/7536768/8296184
        return res.status(400).json({'success': false, 'code': 'ERR_TIME'});
    }
    function fn() {
        // I suppose you will not use this feature just to do console.logs 
        // and not sure how you plan to do the logic to create new tasks
        console.log("It's " + req.body.time);
    }
    addTask(req.body.time, fn);
    res.status(200).json({'success': true});
});

很长一段时间以来，我一直在试图解决这个问题，但是没有结果。

Answer 1

那是因为您在 .overlay 类上添加了 position：absolute; 而没有在上添加 position：relative; 。项目类。

.item {
    position: relative; // add this
    display: inline-block;
    margin: 0 0 1em 0;
    width: 100%;
    cursor: pointer;
}

按钮在引导砌体中放置不正确

1 个答案: