1

我正在尝试设置一种基于三个堆叠按钮的验证码，这些按钮显示不同的视觉图标。该脚本呈现其中三个按钮（如下所示），我需要验证用户是否根据给定的指令单击了正确的图标。

但是为了给出指令，我需要知道哪些图标已经被渲染，所以我需要 jQuery 继续这三个按钮，选择 i id 属性，然后从加载的内容中选择两个（随机）。例如，在下面的按钮中，我会给出“单击'文件'和'主页'”的指令，以便可以提交表单。

我现在最大的挑战是让 jQuery 知道已呈现的内容并获取每个属性的名称，以便我可以检查按钮是否已被单击，这意味着现在已设置类“活动”。我认为这可以用正则表达式完成，但不确定如何。我尝试了一些不同的方法都没有成功。注意说“活动”类是由 jQuery addClass 在单击时设置的，所以最初该类只是“btn”。

<button id="cb-8" type="button" class="btn active">
    <i id="icon-eye-open" class="icon-eye-open"></i>
</button>
<button id="cb-5" type="button" class="btn active">
    <i id="icon-home" class="icon-home"></i>
</button>
<button id="cb-2" type="button" class="btn active">
    <i id="icon-file" class="icon-file"></i>
</button>

提前感谢您对此的任何帮助。

4

1 回答 1

4

不需要正则表达式。您可以使用索引和简单的 HTML 属性来做到这一点！

首先，HMTL

<div class="instructions">
  Please select <span class="choices"></span>
</div>


<button id="cb-8" type="button" class="btn captcha" data-caption="The Eye">
    <i class="icon-eye-open"></i>
</button>
<button id="cb-5" type="button" class="btn captcha" data-caption="The Home">
    <i class="icon-home"></i>
</button>
<button id="cb-2" type="button" class="btn captcha" data-caption="The File">
    <i class="icon-file"></i>
</button>
<button id="cb-1" type="button" class="btn captcha" data-caption="The Flag">
    <i class="icon-flag"></i>
</button>
<button id="cb-3" type="button" class="btn captcha" data-caption="The Tag">
    <i class="icon-tag"></i>
</button>
<button id="cb-4" type="button" class="btn captcha" data-caption="The Calendar">
    <i class="icon-calendar"></i>
</button>

<br/><br/>

<button type="button" class="btn check-answer">
    <i id="icon-check" class="icon-check"></i>Check Answer
</button>

还有剧本

$(function() {

  // Number of buttons we want to show
  var num_show_buttons = 4;

  // Numbers of buttons that will be the answers. 
  var num_good_buttons = 2;

  // Hide all buttons by default.. and cache it. 
  var all_btn = $(".captcha").hide();

  // Get random numbers to know which buttons we're going to show
  var rand = getRandomNumbers({nums: num_show_buttons, max: all_btn.length})

  // Get random numbres to know which ones are going to be the answers
  var good_rand = getRandomNumbers({nums: num_good_buttons, max: 3})

  // Crawl through each buttons and display the chosen ones.
  $.each(rand, function(x,y) {
    var t_btn = all_btn.eq(y).addClass("visible").show();
  })

  // Crawl through each good buttons, get the captions, and add a class so we know its the good ones.
  $.each(good_rand, function(x,y) {
    var t_btn = $(".captcha.visible").eq(y).addClass("good");

    // This outputs the icons to select to the user. 
    $(".choices").append(t_btn.data('caption') + ", ");
  })


  // Everytime a buttons is clicked, add the active class. If already active, remove it.
  $(document).on("click", '.captcha', function() {
    var btn = $(this);

    if (btn.is(".active")) {
      btn.removeClass("active");
    } else {
      btn.addClass("active")
    }
  });


  $(document).on("click", ".check-answer", function() {
    // By default, the validation is false
    var validation = false;

    // If the number of active buttons equals the numbers of good buttons...
    if ($(".captcha.active").length == num_good_buttons) {
      // Set it the validation to true! But it's not over yet..
      var validation = true;

      // Let's crawl through each active one...
      $(".captcha.active").each(function(x,y) {

        // ... and check if they're good! If not, validation is false!
        if ($(".captcha.active")[x] != $(".captcha.good")[x]) {
          validation = false;
        }
      })
    }

    // Display results
    if (validation == true) {
      alert ("Good stuff!");
    } else {
      alert ("Uh oh :(");
    }

  })


});

// Functions to get x random numbers between range
function getRandomNumbers(params) {
  def = {
    nums: 10,
    min: 0,
    max: 100
  }  

  opt = $.extend({}, def, params);

  var arr = []
  while(arr.length < opt.nums) {
    var randomnumber = Math.floor( Math.random() * opt.max) + opt.min
    var found=false;

    for(var i=0;i<arr.length;i++) { 
      if (arr[i] == randomnumber) { 
        found = true;
        break;
      }      
    }

    if (!found) {
      arr[arr.length] = randomnumber;
    }
  }  

  return arr;
}

这是一个有效的 jsfiddle：http: //jsfiddle.net/rx7Bx/1/

于 2012-10-14T03:37:37.920 回答