1

視覚的に異なるアイコンを表示する3つの積み重ねられたボタンに基づいて一種のキャプチャを設定しようとしています。スクリプトはこれらのボタンのうち3つをレンダリングし（以下のように）、与えられた指示に基づいてユーザーが正しいアイコンをクリックすることを確認する必要があります。

ただし、指示を与えるには、どのアイコンがレンダリングされているかを知る必要があるため、jQueryでこれらの3つのボタンを選択し、i id属性を選択してから、ロードされたものから2つ（ランダムに）を選択する必要があります。たとえば、下のボタンで、「「ファイル」と「ホーム」をクリックして」という指示を出し、フォームを送信できるようにします。

今の私の最大の課題は、jQueryに何がレンダリングされたかを認識させ、それぞれの属性名を取得して、ボタンがクリックされたこと、つまりクラスが「アクティブ」に設定されたことを確認できるようにすることです。これはregexで作成できると思いますが、方法はわかりません。私はいくつかの異なるアプローチを試しましたが失敗しました。「アクティブ」クラスはクリック時にjQueryaddClassによって設定されるため、最初はクラスは単に「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 に答える