Question

我有两列。我想使用复选框选择第1列第2列或两者来附加内容。所以，我认为我需要使用＆＃34;值＆＃34;复选框的属性为$ selector。

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

第一个div应该有class =＆＃34; item＆＃34;加上类=＆＃34;写在第二个文本输入＆＃34; 在第二个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

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

2 个答案: