Question

我在从代码中获取所需结果时遇到问题。下面是我的jQuery代码，HTML和CSS的一页完整详细信息，因此任何人都可以直接复制和测试。

我的黄金是更有效地管理我的新推特粉丝。下面的页面应显示我最近的粉丝，然后给我3个选项来决定每个粉丝（1.跟进，2。观察，或3.忽略。

点击提交按钮后，我应该能够提取关注者 id 和相应的关注选项，然后构建一个包含每个关键字的数组一对追随者（id和follow-option），供进一步处理。

我创建了一个警报来测试我的代码是否正常工作，但我得到的是一个包含第一个配置文件数据两倍的数组，如下所示： （1234567891，follow，1234567891，follow） 即可。我的代码的迭代和相应数据的收集功能不正常，可能会在第一个配置文件中停止。

我期待这样：（1234567891，follow，2234567892，忽略）或者这：（[1234567891，忽略] [2234567892，观看]）取决于我做出的选择。我怎样才能得到我想要的结果？我仍然是这方面的新手，但取得了进展。

我在这个网站上搜索过类似的例子，但仍然得到了同样不受欢迎的结果。

我有股票请帮忙！对于这篇长篇文章感到抱歉，我只是想尽可能多地提供详细信息。

感谢。

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

Answer 1

在这一行：

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

你在每个＆＃34; profile-container＆＃34;上骑自行车。并且您需要在每个＆＃34; profile-container＆＃34;中包含profile-id和checkbox值。所以你可以用这种方式找到它们：

而不是：

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

你需要：

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

复选框也是如此。

所以代码片段是：

＆＃13;

$("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;
}

＆＃13;

#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;}

＆＃13;

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

＆＃13;

如何将具有各自ID的多个已检查数据提取到数组中 - jQuery

1 个答案: