Jquery輸入值作爲選擇器來追加內容。然後使用輸入值作爲附加內容

我有兩列。我想選擇第1列第2列或兩者都添加內容，使用複選框。所以，我想我需要使用複選框的「value」屬性作爲$選擇器。Jquery輸入值作爲選擇器來追加內容。然後使用輸入值作爲附加內容

然後，我需要追加兩個div到該選擇器。一個嵌套在另一個內部。

第一個div應該有類=「項」加類=「寫在第二個文本輸入」而在第二個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

來源

2015-04-17 FYP 89

你能解釋得更清楚嗎？ –

https://jsfiddle.net/robinat130/0cahbs6c/檢查這個小提琴 – Robin

示例HTML將有助於更好地解釋事情。 –

好了，一些編輯後，我想，我想我有一個完全可行的解決方案

的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/

來源

2015-04-17 06:02:51 JLewkovich

是的，這就是它。但它似乎改變它而不是追加一套新的div。 –

你可以做'$（'。a'）。append（「

" + $('#content').val() + "

」）;' – JLewkovich

@ FYP89請看我更新的解決方案，我相信它滿足所有要求 – JLewkovich

試試這個代碼

$("#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

來源

2015-04-17 06:09:38 nirmal

這也將添加類，我認爲你的第二個輸入做這個工作 – nirmal

Jquery輸入值作爲選擇器來追加內容。然後使用輸入值作爲附加內容

回答

相關問題