Question

我正在努力让文本字段显示在已更改的元素下方。当用户选中复选框时，我希望文本字段显示在复选框下方，并将所有元素向下推。我该如何做到这一点？现在它只是添加div底部的文本框。我添加了一个小提琴HERE

这是我用来添加文本字段的代码：

function displayDate(dateBox) {
    if($('#' + dateBox + "Date").length) {
        $( '#' + dateBox + "Date" ).remove();
    } else {
        var input = document.createElement("input");
        input.type = "text";
        input.id = dateBox + "Date";
        input.name = dateBox + "Date";
        document.getElementById("displayingDealers").appendChild(input);
    }

}

这是容器：

<fieldset class="wideFieldSet">
    <div id="displayingDealers">
    <legend>Displaying Dealer Details</legend>      
        <p>What products do you have on display?</p>
        <p><label class="wideLabel" for="93057">93057</label><input class="floatLeftCheckbox" type="checkbox" id="93057" name="displayingdealerdetails[93057]" onchange="displayDate(this.id)"/></p>
        <p><label class="wideLabel" for="93058">93058</label><input class="floatLeftCheckbox" type="checkbox" id="93058" name="displayingdealerdetails[93058]" onchange="displayDate(this.id)" /></p>
        <p><label class="wideLabel" for="93107">93107</label><input class="floatLeftCheckbox" type="checkbox" id="93107" name="displayingdealerdetails[93107]" onchange="displayDate(this.id)" /></p>
        <p><label class="wideLabel" for="93108">93108</label><input class="floatLeftCheckbox" type="checkbox" id="93108" name="displayingdealerdetails[93108]" onchange="displayDate(this.id)" /></p>
        <p><label class="wideLabel" for="93117">9311</label><input class="floatLeftCheckbox" type="checkbox" id="93117" name="displayingdealerdetails[93117]" onchange="displayDate(this.id)"/></p>
        <p><label class="wideLabel" for="93118">93118</label><input class="floatLeftCheckbox" type="checkbox" id="93118" name="displayingdealerdetails[93118]" onchange="displayDate(this.id)" /></p>
        <p><label class="wideLabel" for="93085">93085</label><input class="floatLeftCheckbox" type="checkbox" id="93085" name="displayingdealerdetails[93085]" onchange="displayDate(this.id)"/></p>
        <p><label class="wideLabel" for="EOH51294">EOH51294</label><input class="floatLeftCheckbox" type="checkbox" id="EOH51294" name="displayingdealerdetails[EOH51294]" onchange="displayDate(this.id)" /></p>

        <p><label for="OtherText">If other please explain</label><input type="text" name="displayingdealerdetails[OtherText]" id="OtherText" /></p>

        <p class="navigation"><button class="button" type="button" onclick="prevForm();">Previous</button>                                                                                              
                              <button class="button" type="button" onclick="nextForm();">Next</button></p>

    </div>
</fieldset>

Answer 1

您需要将文本框附加到每个段落。这是JS代码的修改版本：

function displayDate(dateBox) {
    if($('#' + dateBox + "Date").length) {
        $( '#' + dateBox + "Date" ).remove();
    } else {
        var input = document.createElement("input");
        input.type = "text";
        input.id = dateBox + "Date";
        input.name = dateBox + "Date";
        $('#'+dateBox).parent().append(input);
    }

}

我还有一个更新的小提琴：fiddle

Answer 2

.insertAfter()和.after()都可以实现您的目标。唯一的区别是他们的语法：

$("<p>Test</p>").insertAfter(".inner");
$(".inner").after("<p>Test</p>");
// Both of the above lines do the same thing; you would use one, not both
...
<div class="container">
    <h2>Greetings</h2>
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>

结果：

<div class="container">
    <h2>Greetings</h2>
    <div class="inner">Hello</div>
    <p>Test</p>
    <div class="inner">Goodbye</div>
    <p>Test</p>
</div>

在单击的元素下面添加元素

2 个答案: