Question

我正在制作一个算法构建器，并在顶部有一个主文本框，当我单击它下面的“+”时，它会将自身的副本添加到下一行。如果那里已经存在一行，则将其添加到该行。问题是我不想只将它添加到下一行，我希望它位于我按下“+”符号的位置。有人请看看我的代码，并给我一些关于如何解决这个问题的建议。非常感谢你。

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 {

}

Answer 1

你想要这样的东西吗？

小提琴：http://jsfiddle.net/Td97j/1/

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

试图根据父母的位置定位孩子

1 个答案: