將元素分配給數組，然后打印jQuery
[英]Assigning Elements to array then printing jquery
問題描述
我遇到一個問題，我需要將復選框中的值放入數組中，然后在數組上使用toString（）並將數組內容寫入div。 任何幫助將非常感激。
<form id="form" action="" onsubmit="return false">
<div id="inputs" class="alignAndWhiteText">
<div style="margin-left:80px">
<label>List music in the order you prefer</label>
<hr style="margin-right:80px"/>
<div id="selections">
<input type="checkbox" id="popMusic">Pop Music<br>
<input type="checkbox" id="metalMusic">Metal Music<br>
<input type="checkbox" id="countryMusic">Country Music<br>
<input type="checkbox" id="rapMusic">rap Music<br>
<input type="checkbox" id="electronicMusic">Electronic Music<br>
</div>
<div id="userFeedback" style="color:white;text-align:center"><p></p></div>
</div>
</div>
</form>
$(document).ready(function(){
var music = ["","","","",""];
$('#popMusic').click(function(){
music.push($('#popMusic').val());
});
$('#metalMusic').click(function(){
music.push($('#metalMusic').val());
});
$('#countryMusic').click(function(){
music.push($('#countryMusic').val());
});
$('#rapMusic').click(function(){
music.push($('#rapMusic').val());
});
$('#electronicMusic').click(function(){
music.push($('#electronicMusic').val());
});
music.toString();
for(i = 0;i < music.length; i++){
$('#userFeedback').html(music);
}
}）;
3 個解決方案
解決方案1
0 已采納 2016-04-25 13:22:01
這是你想要的嗎？ 我已經重構了代碼並利用了each jQuery。
$(document).ready(function(){ var music = []; $( ".musicSelection" ).each(function( index ) { $(this).change(function() { if($(this).is(':checked')) { $('#userFeedback').append("<p>" + $(this).val() + "</p>"); } }); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="form" action="" onsubmit="return false"> <div id="inputs" class="alignAndWhiteText"> <div style="margin-left:80px"> <label>List music in the order you prefer</label> <hr style="margin-right:80px"/> <div id="selections"> <input class="musicSelection" type="checkbox" id="popMusic" value="Pop Music">Pop Music<br> <input class="musicSelection" type="checkbox" id="metalMusic" value="Metal Music">Metal Music<br> <input class="musicSelection" type="checkbox" id="countryMusic" value="Country Music">Country Music<br> <input class="musicSelection" type="checkbox" id="rapMusic" value="rap Music">rap Music<br> <input class="musicSelection" type="checkbox" id="electronicMusic" value="Electronic Music">Electronic Music<br> </div> <div id="userFeedback" style="color:tomato;text-align:center"><p></p></div> </div> </div> </form>
解決方案2
0 2016-04-25 13:33:04
好的，首先，您忘記了所有關閉的輸入標簽。
另外，您還用5個空索引填充了陣列。
為每個輸入框添加一個值屬性
遍歷數組以顯示列表，並使用.html（）將覆蓋先前的值，因此您需要使用append。
$(document).ready(function(){
var music = [];
$('#popMusic').click(function(){
music.push($('#popMusic').val());
$('#userFeedback').append("Pop Music<br>");
});
$('#metalMusic').click(function(){
music.push($('#metalMusic').val());
$('#userFeedback').append("Metal Music<br>");
});
$('#countryMusic').click(function(){
music.push($('#countryMusic').val());
$('#userFeedback').append("Country Music<br>");
});
$('#rapMusic').click(function(){
music.push($('#rapMusic').val());
$('#userFeedback').append("Rap Music<br>");
});
$('#electronicMusic').click(function(){
music.push($('#electronicMusic').val());
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script> $(document).ready(function(){ var music = []; $('#popMusic').click(function(){ music.push($('#popMusic').val()); $('#userFeedback').append("Pop Music<br>"); }); $('#metalMusic').click(function(){ music.push($('#metalMusic').val()); $('#userFeedback').append("Metal Music<br>"); }); $('#countryMusic').click(function(){ music.push($('#countryMusic').val()); $('#userFeedback').append("Country Music<br>"); }); $('#rapMusic').click(function(){ music.push($('#rapMusic').val()); $('#userFeedback').append("Rap Music<br>"); }); $('#electronicMusic').click(function(){ music.push($('#electronicMusic').val()); $('#userFeedback').append("Electronic Music<br>"); }); music.toString(); }); </script> </head> <body> <form id="form" action="" onsubmit="return false"> <div id="inputs" class="alignAndWhiteText"> <div style="margin-left:80px"> <label>List music in the order you prefer</label> <hr style="margin-right:80px"/> <div id="selections"> <input type="checkbox" id="popMusic" value="Pop Music">Pop Music</input><br> <input type="checkbox" id="metalMusic" value="Metal Music">Metal Music</input><br> <input type="checkbox" id="countryMusic" value="Country Music">Country Music</input><br> <input type="checkbox" id="rapMusic" value="Rap Music">rap Music</input><br> <input type="checkbox" id="electronicMusic" value="Electronic Music">Electronic Music</input><br> </div> </div> </div> </form> <div id="userFeedback" style="text-align:center"><p></p></div> </body> </html>
解決方案3
0 2016-04-25 13:45:53
這是采用以下方法的另一種解決方案：
- 使用
value屬性存儲該特定輸入的值 - 使用
name屬性來“群集”音樂輸入。 現在，您可以按名稱選擇這些輸入。 - 使用事件委托來設置事件回調。 這意味着不會為每個輸入元素設置回調，而是僅對父元素設置一次回調（在本例中為
#selections），這樣效率更高。
更新：單擊輸入后將被禁用，以防止出現無休止的列表。
$(document).ready(function(){ var result = []; $('#selections').on('click', 'input[name="music"]', function () { var $input = $(this); // add to the order list result.push($input.val()); // disable input $input.prop('disabled', true); // show result $('#userFeedback').html(result.join('<br>')); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="selections"> <input type="checkbox" name="music" value="Pop Music">Pop Music <br> <input type="checkbox" name="music" value="Metal Music">Metal Music<br> <input type="checkbox" name="music" value="Country Music">Country Music<br> <input type="checkbox" name="music" value="Rap Music">Rap Music<br> <input type="checkbox" name="music" value="Electronic usic">Electronic Music<br> </div> <div id="userFeedback" style="text-align:center"></div>
在JS中分配數組中的元素時出錯
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.