jquery - 匹配来自两个数组的数据

时间:2014-05-22 08:37:28

标签: jquery arrays random

我有以下代码:

var ColorsTable = ['#ff0000', '#34d104', '#18a0f4', '#ffffff', '#000000'];
var ColorsTableDescription = ['red-description', '#34d104-description', '#18a0f4-description', 'white-description', 'black-description'];

jQuery( document ).ready(function( $ ) {

    $('#random-it').click(function () {
    var Rand1 = ColorsTable[Math.floor(Math.random() * ColorsTable.length)];

$("#rama path").css("fill", Rand1);
var input = $('#kolor_ramy');
                input.val('');
                input.val(input.val() + Rand1);
                return false;
  });

});

如何实现这样的解决方案,即从ColorsTable中随机化颜色后,它会在输入中以口头形式显示其名称(因此从第二个数组中取出)?我应该使用IF?

3 个答案:

答案 0 :(得分:1)

为什么不保存随机索引并从两个数组中获取颜色,颜色名称。

答案 1 :(得分:1)

如果我猜对了你的要求,你需要这样的东西,

var ColorsTable = ['#ff0000', '#34d104', '#18a0f4', '#ffffff', '#000000'];
var ColorsTableDescription = ['red-description', '#34d104-description', '#18a0f4-description', 'white-description', 'black-description'];

jQuery(document).ready(function ($) {

    $('#random-it').click(function () {
        var rand = Math.floor(Math.random() * ColorsTable.length);
        var color = ColorsTable[rand];

        $("#rama path").css("fill", color);
        $('#kolor_ramy').val(ColorsTableDescription[rand]);
        return false;
    });

});

即。变量中的随机数相同。并使用相同的no来获取颜色和颜色描述。

答案 2 :(得分:0)

由于两个数组都有相同的长度,并且每个Color都有一个相应的名称,您只需要保存您随机化的索引并用于从第二个数组中获取颜色代码及其描述:

var ColorsTable = ['#ff0000', '#34d104', '#18a0f4', '#ffffff', '#000000'];
var ColorsTableDescription = ['red-description', '#34d104-description', '#18a0f4-description', 'white-description', 'black-description'];

jQuery( document ).ready(function( $ ) {

  $('#random-it').click(function () {
  var randomIndex = Math.floor(Math.random() * ColorsTable.length);
  var Rand1 = ColorsTable[randomIndex];

  $("#rama path").css("fill", Rand1);
  var input = $('#kolor_ramy');
            input.val('');
            input.val(input.val() + ColorsTableDescription[randomIndex]); //Not quite sure if you intend to use it here but that is how you can get the respective description.
            return false;
  });

});