0
我試圖寫一個購物清單功能只是爲了好玩,如果用戶沒有點擊任何單選按鈕,他們會從服務器獲得完整的日誌列表,我完成了該部分但我現在卡住不知道如何顯示用戶單擊的單選按鈕值的列表映射? 例如,如果用戶點擊guava
那麼日誌只會顯示有關番石榴消息:jQuery如何映射數組與單選按鈕值
Jan 2 22:00:10 guava for 1
如果用戶點擊guava and strawberry
,則日誌將同時顯示番石榴和草莓的消息是這樣的:
Jan 1 00:00:10 strawberry for 2
Jan 2 22:00:10 guava for 1
Jan 3 03:10:16 strawberry for 22
我的代碼是在這裏:
var cart = "|grocery|Jan 1 00:00:10 |shopping| [list]|strawberry| for 2 |grocery|Jan 1 00:20:23 |shopping| [list]|apple| for 4 |grocery|Jan 2 00:10:10 |shopping| [list]|apple| for 5 |grocery|Jan 2 00:20:15 |shopping| [list]|banana| for 3 |grocery|Jan 2 10:00:00 |shopping| [list]|apple| for 10 |grocery|Jan 2 22:00:10 |shopping| [list]|guava| for 1 |grocery|Jan 3 01:09:08 |shopping| [list]|watermelon| for 7 |grocery|Jan 3 03:10:16 |shopping| [list]|strawberry| for 22";
$("#button").click(function(){
\t var tidyList = cart.split("|grocery|");
for(var i=0; i<tidyList.length; i++){
\t var list = tidyList[i].split("|");
var tmp = list[0] + "\r " + list[3] + list[4] + "\r<br/>";
if(list.length > 1 && $("input:radio").is(":checked") == false){
\t $("#showList").append(tmp);
}
\t }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<th>Fruits for you</th>
<td>
<ul>
<li>
<input type="radio" value="apple" id="apple">
<label for="apple">apple</label>
</li>
<li>
<input type="radio" value="banana" id="banana">
<label for="apple">banana</label>
</li>
<li>
<input type="radio" value="watermelon" id="watermelon">
<label for="apple">watermelon</label>
</li>
<li>
<input type="radio" value="guava" id="guava">
<label for="apple">guava</label>
</li>
<li>
<input type="radio" value="strawberry" id="strawberry">
<label for="apple">strawberry</label>
</li>
</ul>
</td>
</tr>
</table>
<input type="button" value="Shopping List" id="button">
<div id="showList"></div>
你應該使用合適的數據結構,這個開始,而不是一個字符串。 – CBroe