Question

我想做什么：

随机播放显示在一行中的六张照片。每张照片下面都有一个单选按钮。这是一个单选题。参与者选择其中一张照片作为答案。
每次洗牌时记录单选按钮或照片的顺序，以便我知道参与者选择了哪张照片。我还需要知道他们在数组中选择的照片的位置，所以我需要知道洗牌的数组的顺序。例如，如果参与者选择＆＃34;图片5，＆＃34;我需要知道a）他选择了＆＃34; picture5＆＃34; b）＆＃34;图片5＆＃34;在数组中，例如阵列中的位置1。这就是为什么只有单选按钮的值不起作用。很抱歉没有说清楚。

我认为我应该做的事情：

为照片或单选按钮创建一个数组。
使用功能随机播放图片。
创建一个函数或其他东西，以便在每次洗牌时获取数组的顺序。
每次洗牌时，使用document.write('<input type="hidden" name="PhotoArray" value="' + lineup1.toString() + '">');记录数组的顺序。我将代码放在Amazon Turk上，所以代码所做的就是将数组的顺序打印到excel文件中。

我一直在线搜索并尝试使用第3步的不同代码，但到目前为止没有任何作用。有谁知道什么是好的解决方案？非常感谢。

我尝试创建一个数组，然后将数组分配给单选按钮，然后记录数组的顺序。它没有用，因为阵列没有成功分配给单选按钮。

var RadioArray = new Array(1,2,3,4,5,6);

Shuffle(RadioArray);

function RadioOrder(){
    $("#version1page11").hide(); // This hides the previous page.
    $("#version1page12").show(); // This shows the page on which the photos are displayed.
    $("#lp" + RadioArray[Math.floor(Math.random()*RadioArray.length)]).show();
   }

document.write(RadioArray)

我还尝试使用ID创建数组。没有工作。任何建议的解决方案都会有所帮助！

我的原始代码：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


//This function shuffles the photos.
    $(document).ready(function() {
        var a = $("#lole > div").remove().toArray();
        for (var i = a.length - 1; i >= 1; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var bi = a[i];
        var bj = a[j];
        a[i] = bj;
        a[j] = bi;
    }
    $("#lole").append(a);
});

这是所有照片和单选按钮的div：

<div id="lole" class="checkboxgroup" align="center">

    <label id="le1" for="lp1"><img src="picture1.jpg" height="150" width="120" id="ak1"/><br />

        <input type="radio" name="Choice" id="lp1" value="picture1" />

    </label>

    <label id="le2" for="lp2"><img src="picture.jpg" height="150" width="120" id="ak2"/><br />

        <input type="radio" name="Choice" id="lp2" value="picture2" />

    </label>

    <label id="le3" for="lp3"><img src="picture2.jpg" height="150" width="120" id="ak3"/><br />

        <input type="radio" name="Choice" id="lp3" value="picture3" />

    </label>

    <label id="le4" for="lp4"><img src="picture4.jpg" height="100" width="120" id="ak4" /><br />

        <input type="radio" name="Choice" id="lp4" value="picture4" />

    </label>

    <label id="le5" for="lp5"><img src="picture5.jpg" height="150" width="120" id="ak5"/><br />

        <input type="radio" name="Choice" id="lp5" value="picture5" />

    </label>

    <label id="le6" for="lp6"><img src="picture6.jpg" height="200" width="120" id="ak6"/><br />

        <input type="radio" name="Choice" id="lp6" value="picture6" />

    </label>

</div>

Answer 1

欢迎使用StackOverflow！如果您还没有这样做，请 take the tour 并访问 help center 。

我认为关键是：

var order = a.map(function(label) {return label.htmlFor;})

记录了id的顺序。在这个片段中，我只是console.log结果，但你可以使用jQuery方法将其添加到表单中（而不是document.write - 它有点晚了！）

另请注意，我使用$("#lole > label")而不是$("#lole > div")。 "#lole > label"表示label个元素的集合，这些元素是ID为lole的元素的直接子元素。这些是我们洗牌的。我还改变了图像大小以使它们适合，并添加了编号，以便您可以看到洗牌是如何发生的。

＆＃13;

$(document).ready(function() {
  var a = $("#lole > label").remove().toArray();
  for (var i = a.length - 1; i >= 1; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var bi = a[i];
    var bj = a[j];
    a[i] = bj;
    a[j] = bi;
  }
  $("#lole").append(a);
  $("#choose").click(function(e) {
    var order = a.map(function(label) {return label.htmlFor;})
    console.log("Chosen: " + $(":radio[name=Choice]:checked").closest("label").prop("for"));
    console.log("Order: " + order);
  });
});

＆＃13;

label {
  display: inline-block;
  margin: 1em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="lole" class="checkboxgroup" align="center">
  <label id="le1" for="lp1"><img src="picture1.jpg" height="50" width="50" id="ak1"/><br/>
    1: <input type="radio" name="Choice" id="lp1" value="picture1" />
  </label>

  <label id="le2" for="lp2"><img src="picture.jpg" height="50" width="50" id="ak2"/><br />
    2: <input type="radio" name="Choice" id="lp2" value="picture2" />
  </label>

  <label id="le3" for="lp3"><img src="picture2.jpg" height="50" width="50" id="ak3"/><br/>
    3: <input type="radio" name="Choice" id="lp3" value="picture3" />
  </label>

  <label id="le4" for="lp4"><img src="picture4.jpg" height="50" width="50" id="ak4"/><br/>
    4: <input type="radio" name="Choice" id="lp4" value="picture4" />
  </label>

  <label id="le5" for="lp5"><img src="picture5.jpg" height="50" width="50" id="ak5"/><br/>
    5: <input type="radio" name="Choice" id="lp5" value="picture5" />
  </label>

  <label id="le6" for="lp6"><img src="picture6.jpg" height="50" width="50" id="ak6"/><br/>
    6: <input type="radio" name="Choice" id="lp6" value="picture6" />
  </label>
</div>

<button id="choose" type="button">Submit</button>

＆＃13;

Answer 2

您可以使用jQuery获取所选单选按钮的索引：

var index = $(":radio[name=Choice]:checked").closest("label").index();

如何在Javascript中保存数组的混洗顺序？

2 个答案: