Question

我有一个调查，有两个单选按钮，当点击将提交并发送到感谢页面，然后重定向回调查，我的问题是如何让单选按钮在位置随机，但我似乎无法为了让它工作，我的jquery是否存在问题

<!DOCTYPE html>
<html>
   <head>
      <title>survey</title>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="test7.css">
      <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
 <script>
var cc-selector = $("#cc-selector");

cc-selector.html(
    cc-selector.find("label").sort(function(){
        return Math.round(Math.random())-0.5;
    })
);
 </script>
    <body>
       <div id="wrapper">
    <header>

     <img src="Win.png" alt="Logo" class="Logo">

     <img src="Screw.jpg" alt="screwLogo" class="screwLogo">



        <h1 class="Survey_Title">Heath and Wellbeing</h1><br>
        <h2 class="Survey_Question">Did you find the most recent Wellbeing campaign useful?</h2><br>

<form action="" method="post">

    <div class="cc-selector">
     <label>
        <input id="happy" type="radio" name="radAnswer" value="happy" onclick="window.location='test6.html';" />
        <label class="drinkcard-cc happy" for="happy"></label>
        </label>

         <label>
        <input id="sad" type="radio" name="radAnswer" value="sad" onclick="window.location='test6.html';" />
        <label class="drinkcard-cc sad"for="sad"></label>
        </label>

    </div>
</form>


        </header>
        </div>
    </body>
</html>

Answer 1

所以这就是你的代码中出错的地方：

变量名称不正确（Source），
在您的函数中，您想要使用id="cc-selector"更改元素的html，但是您没有该元素，
label中有label，因此jQuery find()函数会找到所有标签。

我做了什么让它发挥作用：

更改了变量名称
将id="cc-selector"更改为class="cc-selector"，
将外部标签更改为div。

以下是一个工作示例

＆＃13;

var ccselector = $(".cc-selector");

ccselector.html(ccselector.find(".radioHolder").sort(function() {
  return (Math.random() - 0.5);
}));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <form action="" method="post">
    <div class="cc-selector">
      <div class="radioHolder">
        <input id="happy" type="radio" name="radAnswer" value="happy" onclick="" />
        <label class="drinkcard-cc happy" for="happy">One</label>
      </div>

      <div class="radioHolder">
        <input id="sad" type="radio" name="radAnswer" value="sad" onclick="" />
        <label class="drinkcard-cc sad" for="sad">Two</label>
      </div>
    </div>
  </form>
</div>

＆＃13;

Answer 2

随机移动label的想法非常好但是你遇到了这些问题：

您的主要问题是变量cc - selector不正确。（变量名称只能包含字母，数字，下划线和美元符号。）
cc-selector是class，而不是id，因此您需要选择.cc-selector，而不是#cc-selector。
由于label中有label个，因此您只希望定位cc-selector的直接子项。我建议你改用.children()。
您没有包含jQuery库，例如：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

请注意，要在数组中随机化元素顺序，我们需要.sort(function{…})返回一个随机<0，0，>0的数字，所以{{1我们满足了我们所有的需求。

⋅ ⋅ ⋅

以下是根据您的代码制作的简化代码段：
（我删除了一些HTML以获得更短的代码段）

＆＃13;

return (Math.random() - 0.5);

＆＃13;

$(".cc-selector").html(
  // $(".cc-selector > label").sort(function() { // What you wanted to do
  $(".cc-selector").children().sort(function() { // What I propose you
    return (Math.random() - 0.5); // No need to use 'round()'
  })
);

＆＃13;

⋅ ⋅ ⋅

然后，您可以使用更多标签：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>(I added texts to see the values. Run the code multiple times to see it moving!)</p>
<div class="cc-selector">
  <label>
    <input id="happy" type="radio" name="radAnswer" value="happy" onclick="window.location='test6.html';" />
  <label class="drinkcard-cc happy" for="happy">Happy</label>
  </label>
  <label>
    <input id="sad" type="radio" name="radAnswer" value="sad" onclick="window.location='test6.html';" />
  <label class="drinkcard-cc sad"for="sad">Sad</label>
  </label>
</div>

＆＃13;

$(".cc-selector").each(function() {
  $(this).html(
    $(this).children().sort(function() {
      return (Math.random() - 0.5);
    })
  );
});

＆＃13;

希望它有所帮助！

重新排序单选按钮

2 个答案: