试着根据父母的位置来定位孩子

Trying to position children according to where their parents are

本文关键字：位置 定位 孩子 父母      更新时间：2023-09-26

我正在制作一个算法生成器，上面有一个主文本框，当我单击它下面的"+"时，它会将自己的副本添加到下一行。如果已经有一行，它会将其添加到该行中。问题是，我不想把它添加到下一行，我希望它位于我按下"+"符号的那一行的中心位置。有人请看一下我的代码，并给我一些关于如何解决这个问题的建议。非常感谢。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Pathway Builder</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <div id="pathway_builder">
        <div class="row" id="row1">
            <div class="whole">
                <div class="centered_box">
                    <textarea class="text_field_not_selected"></textarea>
                </div>
                <input type="button" value="+" class="add_child not_visable" />
            </div>
        </div>
    </div>
    <script src="jQuery.js" type="text/javascript"></script>
    <script src="selectors.js" type="text/javascript"></script>
</body>
</html>

javaScript/jQuery

$('textarea').live('focusin blur', function() {
    $(this).toggleClass('text_field_not_selected');
});
$('.whole').live('mouseenter mouseleave', function() {
    $(this).find('.add_child').toggleClass('not_visable');
});

$(document).ready(function() {
    $('.add_child').live({
        click: function() {
            var new_row = '<div class="row"></div>'
            var new_child = '<div class="whole"><div class="centered_box"><textarea class="text_field_not_selected"></textarea></div><input type="button" value="+" class="add_child not_visable" /></div>'
            if ($(this).parents('.row').next().length == 0) {
                $(this).parents('.row').after(new_row);
                $(this).parents('.row').next().html(new_child).css('position-x', '');
            } else {
                $(this).parents('.row').next().append(new_child);
            }
        }
    });
});

CSS

body {
    margin: 0px;
    padding: 0px;
    text-align: center;
}
textarea {
    width: 4em;
    height: 1em;
    overflow: hidden;
}
textarea:focus {
    outline:  none;
    text-align: center;
    resize: both;
    padding-top: 5px;
    padding-bottom: 5px;
}
.text_field_not_selected {
    text-align: center;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0px 3px 5px #444;
    -moz-box-shadow: 0px 3px 5px #444;
    -webkit-box-shadow: 0px 3px 5px #444;
    resize: none;
}
.pathway_builder {
    text-align: center;
}
.whole {
    text-align: center;
    display: inline-block;
    background-position-x: 100px;
}
.centered_box {
    padding: 10px;
    padding-bottom: 0px;
}
.add_child {
}
.not_visable {
    visibility: collapse;
}
.row {
}

你想要这样的东西吗；

Fiddle：http://jsfiddle.net/Td97j/1/

演示：http://jsfiddle.net/Td97j/1/embedded/result/

相关文章：