【发布时间】:2016-09-27 17:02:27
【问题描述】:
我在从我的代码中获取所需结果时遇到问题。下面是我的 jQuery 代码、HTML 和 CSS 的一页完整详细信息,因此任何人都可以直接复制和测试。
我的黄金是更有效地管理我的新 Twitter 关注者。下面的页面应该显示我最近的关注者,然后给我 3 个选项来决定每个关注者(1. 关注、2. 观看或 3. 忽略。
点击提交按钮,我应该能够提取关注者id和相应的follow-option,然后构造一个包含每个关注者的数组一对追随者(id和follow-option),用于进一步处理。
我创建了一个警报来测试我的代码是否正常工作,但我得到的只是一个包含两倍于第一个配置文件数据的数组,如下所示:(1234567891,follow,1234567891,follow)。我的代码的迭代和相应数据的收集无法正常运行,它可能在第一个配置文件处停止。
我希望有这个:(1234567891,follow,2234567892,ignore) 或这个:([1234567891,ignore][2234567892,watch]) 取决于我所做的选择。我怎样才能达到我想要的结果?我在这方面还是新手,但正在取得进步。
我已经在这个网站上搜索过类似的例子,但仍然得到相同的不想要的结果。
我有货请帮忙!抱歉发了这么长的帖子,我只是想提供尽可能多的细节。
谢谢。
<head>
<style>
#middle-container{display: flex;flex-direction: column;align-items: center;}
.profile-container{width: 676px;height: 120px;margin-top: 10px;margin-left: 25px;margin-right: 25px;margin-bottom: 10px;}
.new-profile{display: flex;flex-direction: row;position: relative;top: 30px;width: 80%;float: left;}
.profile-details{margin: 15px 10px 15px 10px;font-size: 13px;color: #030712;}
.follow-action{position: relative;top: 30px;margin: 1px;float: right;}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id='middle-container'>
<div class= "profile-container">
<div class= "new-profile">
<div class= "profile-image"><img src="http://www.gravatar.com/avatar" alt="Profile Image" style="width:80px;height:80px;"></div>
<div class= "profile-details">
<div class= "profile-item">Name :</div>
<div class= "profile-item">Location :</div>
<div class= "profile-id">ID : 1234567891</div>
</div>
</div>
<div class= "follow-action">
<div class= "follow-action-title">Select Option</div>
<form class= "follow-option">
<input class="test follow-option-default" type="radio" name="followoption" value="follow" checked>Follow Back<br>
<input class="test" type="radio" name="followoption" value="watch">Watch This!<br>
<input class="test" type="radio" name="followoption" value="ignore">Ignore<br>
</form>
</div>
</div>
<div class= "profile-container">
<div class= "new-profile">
<div class= "profile-image"><img src="http://www.gravatar.com/avatar" alt="Profile Image" style="width:80px;height:80px;"></div>
<div class= "profile-details">
<div class= "profile-item">Name :</div>
<div class= "profile-item">Location :</div>
<div class= "profile-id">ID : 2234567892</div>
</div>
</div>
<div class= "follow-action">
<div class="follow-action-title">Select Option</div>
<form class= "follow-option">
<input class="test follow-option-default" type="radio" name="followoption" value="follow" checked>Follow Back<br>
<input class="test" type="radio" name="followoption" value="watch">Watch This!<br>
<input class="test" type="radio" name="followoption" value="ignore">Ignore<br>
</form>
</div>
</div>
<br></br>
<div class= "follow-action-submit">
<button style= "align-self:center; cursor: pointer;">SUBMIT SELECTED OPTIONS</button>
</div>
</div>
<script>
$("button").click(function(){
return submitFollowOptions();
});
function submitFollowOptions(){
alert(selectedOptions());
}
function selectedOptions(){
final_options_set = [];
$(".profile-container").each(function(index,element){
var id = $(".profile-id").html();
var option = $("input:radio:checked").val();
var option_set = [id,option];
final_options_set.push(option_set);
console.log(this);
});
return final_options_set;
}
</script></body></html>
【问题讨论】:
-
请将 var option = $("input:radio:checked").val(); 替换为此 var option = $("input[type=收音机]").val();
-
感谢您的快速回复。我已经完成了更换,但仍然没有改变。在发布到这里之前,我已经尝试过这个想法。请您复制代码并自己尝试一下,一切都在同一页上; css、html和jquery。非常感谢。
标签: javascript jquery arrays loops