【问题标题】:How to extract multiple checked data with their respective ID into an array - jQuery如何将具有各自ID的多个检查数据提取到数组中 - jQuery
【发布时间】: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


【解决方案1】:

在这一行:

$(".profile-container").each(function(index,element){

您在每个“配置文件容器”上循环,您需要获取每个“配置文件容器”内的配置文件 ID 和复选框值。所以你可以通过这种方式找到它们:

代替:

var id = $(".profile-id").html();  // get all profile-id and returns
                                   // only the first text

你需要:

var id = $(element).find(".profile-id").html();

复选框也是如此。

所以sn-p是:

$("button").click(function(){
  return submitFollowOptions();
});
function submitFollowOptions(){
  console.log('submitFollowOptions: ' + selectedOptions());
}
function selectedOptions(){
  final_options_set = [];
  $(".profile-container").each(function(index,element){
    var id = $(element).find(".profile-id").html();
    var option = $(element).find("input:radio:checked").val();
    var option_set = [id,option];
    final_options_set.push(option_set);
  });
  return final_options_set;
}
#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;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


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

【讨论】:

    猜你喜欢
    • 2021-08-31
    • 1970-01-01
    • 2021-11-08
    • 1970-01-01
    • 2022-11-11
    • 2019-11-23
    • 1970-01-01
    • 2015-11-05
    • 1970-01-01
    相关资源
    最近更新 更多