javascript - HTML CSS 试图创建一个显示在文本上的输入字段

Question

我正在创建一个元素，其中有多个使用 bootstrap 创建的卡片。每张卡片都有页眉、正文和页脚。单击卡片时，我希望输入字段出现在页眉、页脚和正文中。此输入字段应显示在当前文本上方。我可以毫无问题地切换类(class)，但是我很难让我的输入字段与文本对齐。

这是 HTML 结构:

`<div class='card-deck col-3' id='deck'>
        <div class='card grow'>
            <div class='card-header par'>
                <h3 class='target'>${tasks.task}</h3>
                <input id='updateTask' placeholder='Task'>
            </div>
            <div class='card-body par'>    
                <h6 class='target'>Due by: ${newDate}</h6>
                <input id='updateDate' placeholder='Date'>
            </div>
            <div class='card-footer par'>    
                <h6 class='target'> Priority: ${tasks.priority}</h6>
                <input class='update' id='updatePriority' placeholder='Priority'>
            </div>
        </div>    
    </div>`

这是我用来切换类的 JS:

let card = $(this)
card.children('.par').children('.update').toggleClass('hidden');
card.children('.target').toggleClass('remove');

最后这是我目前拥有的 CSS:

.par{
     position: relative;
}

#updateTask, #updateDate, #updatePriority{
    position: relative;   
    z-index: 999;
}

.hidden{
     display: none; 
    z-index:-999;
}

我将包含每组输入和文本的类“par”设置为 relative。然后我将输入字段设置为绝对。我已经尝试了很多定位和 div 重组的组合，但我无法成功地将我的输入字段堆叠在其各自的文本上。

不幸的是，JSfiddle 没有运行，因为我在我的元素中使用了 bootstrap。

Answer 1

我们将使用每个函数，对于每个元素，我们将调用“toggleClass”。

$('#deck input').each(function(index, element){
 $(element).toggleClass('hidden');
});

只需从#deck 获取所有.target 并将其删除。

$('#deck .target').remove();

关于您的类(class)，.hidden display:none 会很好，但是没有 position 属性就不能使用 z-index 属性。 (仅适用于定位元素(position:absolute、position:relative 或 position:fixed)https://www.w3schools.com/cssref/pr_pos_z-index.asp )