Jquery 输入值作为附加内容的选择器。然后使用输入值作为附加内容

Question

我有两列。我想使用复选框选择第 1 列第 2 列或两者都附加内容。所以，我想我需要使用复选框的“值”属性作为 $selector。

然后我需要将两个 div 附加到该选择器。一个，嵌套在另一个里面。

第一个 div 应该有 class="item" 加上 class="写入第二个文本输入" 而在第二个 div 中，htmlcontent 应该是第一个输入中写入的内容。

谢谢。

<div id="container">    
<div class="a">
    <div class="name">Column 1</div>    
    <div class="one">
      <div class="item eagle">
         <div class="cont">Content for 1A</div>
      </div> 
    </div>    
</div>

<div class="b">
    <div class="name">Column 2</div>    
    <div class="two">
      <div class="item lion">
        <div class="cont">content for 2A</div>
      </div> 
    </div>    
</div>    
</div>


<form id="createitems">
  <input id="content" name="content" type="text" placeholder="Content text here">
  <input id="content2" name="content2" type="text" placeholder="Animal class here">
    
  <input id="colchoice" name="column" type="checkbox" value="one">
  <label for="colchoice">One</label>
    
  <input id="colchoice2" name="column" type="checkbox" value="two">
  <label for="colchoice2">Two</label>

  <button id="create" form="createitems" type="button">Create</button>
</form>


$("#create").click(function(){

var check = $("input[type='checkbox']").is(":checked");
var col = $('input[name="column"]:checked').val();

if (check == true){
    
    $( col ).append("<div class="item"><div class="cont"></div></div>");
    $(".cont").html($("content").val());
    
}

jsFiddle

Answer 1

好的，经过一些修改，我想我有一个完全可行的解决方案

Javascript：

$("#create").click(function () {

    //Cycles through all checked boxes of name='column'
    $('input[name="column"]:checked').each(function () {
        var outerDiv = $("."+this.value);
        var itemDiv = $('<div/>').addClass("item " + $('#content2').val());
        var contDiv = $('<div/>').addClass("cont").html($("#content").val());

        outerDiv.prepend(itemDiv.prepend(contDiv));

        if (this.value == "one") {
            $('.a').append(outerDiv);
        }

        if (this.value == "two") {
            $('.b').append(outerDiv);
        }
    });

});

我还对您的 CSS 进行了更改，以将 div 锚定到父容器的顶部（否则，如果每列中的元素数量不均，您将得到未对齐的列）

.a {
    display: inline-block;
    vertical-align: top; //Added this
    width:45%;
}
.b {
    display: inline-block;
    vertical-align: top; //Added this
    width:45%;
}

JSFiddle：https://jsfiddle.net/zmmoojL4/9/

Answer 2

试试这个代码

$("#create").click(function () {
$('input[name="column"]:checked').each(function () {
    $('.' + this.value).find('.cont').append($("#content").val());
    $('.' + this.value).find('.cont').addClass($("#content2").val());
});

});

try this fiddle