Jquery массив из массивов - PullRequest
Новая
       2

Jquery массив из массивов

0 голосов
/ 21 января 2012

Мне нужно создать новый массив строковых элементов из элементов одного массива по умолчанию и других массивов, как я. 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>A canvas animation example</title>
    <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js" type="text/javascript"></script>
    <style type="text/css">
        body {
            margin: 20px;
            font-family: arial, verdana, helvetica;
            background: #fff;
        }
        h1 {
            font-size: 140%;
            font-weight: normal;
            color: #036;
            border-bottom: 1px solid #ccc;
        }
        canvas {
            position: relative;
            margin-right: 20px;
            margin-bottom: 20px;
        }
        pre {
            float: left;
            display: block;
            background: rgb(238,238,238);
            border: 1px dashed #666;
            padding: 15px 20px;
            margin: 0 0 10px 0;
        }
    </style>
</head>
<body>
<fieldset>
<h1>A canvas example</h1>
    <ul>
    <li>
        <canvas class=re1g width=110 height=110></canvas>
        <canvas class=re2g width=110 height=110></canvas>
        <canvas class=re3g width=110 height=110></canvas>
        <canvas class=re1p width=110 height=110></canvas>
        <canvas class=re2p width=110 height=110></canvas>
        <canvas class=re3p width=110 height=110></canvas>
        <canvas class=re1b width=110 height=110></canvas>
        <canvas class=re2b width=110 height=110></canvas>
        <canvas class=re3b width=110 height=110></canvas>
        <canvas class=re1y width=110 height=110></canvas>
        <canvas class=re2y width=110 height=110></canvas>
        <canvas class=re3y width=110 height=110></canvas>
    </li>
    <li>
        <canvas class=ci1g width=110 height=110></canvas>
        <canvas class=ci2g width=110 height=110></canvas>
        <canvas class=ci3g width=110 height=110></canvas>
        <canvas class=ci1p width=110 height=110></canvas>
        <canvas class=ci2p width=110 height=110></canvas>
        <canvas class=ci3p width=110 height=110></canvas>
        <canvas class=ci1b width=110 height=110></canvas>
        <canvas class=ci2b width=110 height=110></canvas>
        <canvas class=ci3b width=110 height=110></canvas>
        <canvas class=ci1y width=110 height=110></canvas>
        <canvas class=ci2y width=110 height=110></canvas>
        <canvas class=ci3y width=110 height=110></canvas>
    </li>
</ul>
</fieldset>
<script type="text/javascript">
    (function($) {
        $(function() {//on DOM ready
            // ===================
            var avaibleColors = [
                '#00C8A8','#75B520','#00CD25',
                '#FF63F6','#FF66B3','#DA73FF',
                '#978AFF','#00B5DE','#CF992C',
                '#CF992C','#FF795F','#C38628'
                ]; 

            var squareCol = [
                're1g','re2g','re3g',
                're1p','re2p','re3p',
                're1b','re2b','re3b',
                're1y','re2y','re3y'
                ];

            var circleCol = [
                'ci1g','ci2g','ci3g',
                'ci1p','ci2p','ci3p',
                'ci1b','ci2b','ci3b',
                'ci1y','ci2y','ci3y'
                ];

            var squareObj = [];
            var circleObj = [];
            var obj;

            $.each(squareCol, function(i, val){
                obj = {};
                obj[val] = avaibleColors[i];
                squareObj.push(obj);
            });

            $.each(circleCol, function(i, val){
                obj = {};
                obj[val] = avaibleColors[i];
                circleObj.push(obj);
            });
            // ===================
            $.each(squareObj, function(reColor, cValue) {
                    var canvasClass = $('canvas.'+reColor+'');
                    if(canvasClass != null) {
                        $.each(canvasClass, function(){
                            var ctx = this.getContext('2d');
                            ctx.save();
                            ctx.lineJoin = 'round';
                            ctx.fillStyle = cValue;
                            ctx.strokeStyle = "#000000";
                            ctx.lineWidth = 2;
                            ctx.beginPath();
                            ctx.moveTo(20, 20);
                            ctx.lineTo(90, 20);
                            ctx.quadraticCurveTo(90, 20, 90, 20);
                            ctx.lineTo(90, 90);
                            ctx.quadraticCurveTo(90, 90, 90, 90);
                            ctx.lineTo(20, 90);
                            ctx.quadraticCurveTo(20, 90, 20, 90);
                            ctx.lineTo(20, 20);
                            ctx.quadraticCurveTo(20, 20, 20, 20);
                            ctx.closePath();
                            ctx.fill();
                            ctx.stroke();
                            ctx.restore();
                        });
                    }// end of if
            console.log(reColor+' '+cValue);
            });
            // ===================
            $.each(circleObj, function(ciColor, cValue) {
                    var canvasClass = $('canvas.'+ciColor+'');
                    if(canvasClass != null) {
                        $.each(canvasClass, function(){
                            var ctx = this.getContext('2d');
                            ctx.save();
                            ctx.lineJoin = 'round';
                            ctx.fillStyle = cValue;
                            ctx.strokeStyle = "#000000";
                            ctx.lineWidth = 2;
                            ctx.beginPath();
                            ctx.arc(55, 55, 45, 0, Math.PI*2, true);
                            ctx.closePath();
                            ctx.fill();
                            ctx.stroke();
                            ctx.restore();
                        });
                    }// end of if
            });
            // ===================
            });
        })(jQuery)
    </script>
</body>

Более простой пример: 

var i_array = ['word1','word2','word3']; //array of n elements
var ii_array = ['text1','text2','text3']; //array of n elements
var iii_array = ['string1','string2','string3']; //array of n elements

//here is what I need:

var iv = ['text1':'word1','text2':'word2','text3':'word3'];
var v = ['string1':'word1','string2':'word2','string3':'word3'];

//To use in

$.each(iv, function(a,b){
  //do something with a,b
});

$.each(v, function(a,b){
  //do something with a,b
});

Как сделать парс элементов в новом массиве и использовать в рисовании холст ..?

Ответы [ 4 ]

0 голосов
/ 21 января 2012 
var i_array   = ['word1','word2','word3'],
    ii_array  = ['text1','text2','text3'],
    iii_array = ['string1','string2','string3'],
    iv = {},
    v  = {};

$.each(i_array, function(index, value){
    iv[ii_array[index]] = value;
    v[iii_array[index]] = value;
});
0 голосов
/ 21 января 2012

Вы должны представлять их как массив пары ключ / значение объекта. Попробуйте это. 

var i_array = ['word1','word2','word3']; //array of n elements
var ii_array = ['text1','text2','text3']; //array of n elements
var iii_array = ['string1','string2','string3']; //array of n elements


var iv = [];
var v = [];
var obj;

$.each(i_array, function(i, val){
   obj = {};obj[ii_array[i]] = val;
   iv.push(obj);
   obj = {};obj[iii_array[i]] = val;
   v.push(obj);
});

//Now you can use iv and v inside the loop here

$.each(iv, function(a,b){
  //do something with a,b
});

$.each(v, function(a,b){
  //do something with a,b
});

EDIT:

Я только что посмотрел на то, что вы делаете в скрипке, которую вы создали. Вам не нужно создавать новые массивы, содержащие пары ключ / значение. Вы можете легко использовать существующие массивы и работать с ними.

Я создал рабочую демонстрацию, используя существующие массивы.

Демо

0 голосов
/ 21 января 2012

Я знаю, у меня возникнут проблемы с ответом, но я попробую:)
Попробуйте следующим образом: 

var i_array = ['word1','word2','word3']; //array of n elements
var ii_array = ['text1','text2','text3']; //array of n elements
var iii_array = ['string1','string2','string3']; //array of n elements

//here is what I need:

//var iv = ['text1':'word1','text2':'word2','text3':'word3'];
//var v = ['string1':'word1','string2':'word2','string3':'word3'];

var iv = new Array();
var v = new Array();
for (var x=0; x<i_array.length; x++)
{
    iv[ii_array[x]] = i_array[x];
    v[iii_array[x]] = i_array[x];
}

// Test if everything went right        
for (var key in iv)
{
    console.log(key+'|'+iv[key]);
}

for (var key in v)
{
    console.log(key+'|'+v[key]);
}

EDITED (A)

Мне кажется, я вас понял:)

Два способа решения вашей проблемы:

1) 

var i_array = ['word1','word2','word3']; //array of n elements
var ii_array = ['text1','text2','text3']; //array of n elements
var iii_array = ['string1','string2','string3']; //array of n elements

var iv = new Array();
var v = new Array();
for (var x=0; x<i_array.length; x++)
{
    iv[ii_array[x]] = i_array[x];
    v[iii_array[x]] = i_array[x];
}

var iv_indexed = new Array();;
for (var k in iv)
{
    iv_indexed.push(k);
    iv_indexed[k] = iv[k];
}

var v_indexed = new Array();;
for (var k in v)
{
    v_indexed.push(k);
    v_indexed[k] = v[k];
}

// Let's try it! :)
$.each(iv_indexed, function(a,b){
    var key = b;
    var value = iv_indexed[b];
    console.log(key+'|'+value);
});

$.each(v_indexed, function(a,b){
    var key = b;
    var value = v_indexed[b];
    console.log(key+'|'+value);
});

2) 

var i_array = ['word1','word2','word3']; //array of n elements
var ii_array = ['text1','text2','text3']; //array of n elements
var iii_array = ['string1','string2','string3']; //array of n elements

iv = new Array();
v = new Array();
for (var x=0; x<i_array.length; x++)
{
    var key = ii_array[x];
    var value = i_array[x];

    var add = {};
    add[ii_array[x]] = i_array[x];
    iv.push( add );

    var add = {};
    add[iii_array[x]] = i_array[x];
    v.push( add );
}

// Let's try it! :)
$.each(iv, function(a,b){
    for (k in b)
    {
        var key = k;
        var value = b[k];
    }
    console.log(key+'|'+value);
});

$.each(v, function(a,b){
    for (k in b)
    {
        var key = k;
        var value = b[k];
    }
    console.log(key+'|'+value);
    });
0 голосов
/ 21 января 2012

Простой цикл for должен быть в состоянии сделать это: 

for (x in i_array){
    iv[ii_array[x]] = i_array[x];
    v[iii_array[x]] = i_array[x];
}

См. Jsfiddle здесь .

ОБНОВЛЕНО ДЛЯ РЕШЕНИЯ РЕАЛЬНОЙ ПРОБЛЕМЫ

Ваш код был испорчен в нескольких местах.См. Рабочий jsfiddle здесь .

Прежде всего, вам не нужно создавать новые массивы.Просто используйте индекс ваших массивов circleCol или squareCol, чтобы извлечь значения цвета из массива availableColors.

Примерно так: 

$.each(squareCol, function(index, className) {
    cValue = avaibleColors[index];
    var canvasClass = '.'+className;
...

Во-вторых, вам не нужно проверять, является ли ваш canvasClassпеременная равна нулю, потому что $ .each () будет извлекать каждое значение массива и не более;следовательно, он всегда будет извлекать значение для canvasClass, который в вашем случае является ключом массива.

Если вам что-то нужно использовать if (canvas.getContext){, как описано в учебнике по холсту MDN .

Надеюсь, это поможет.Я вроде полностью переделал сценарий, поэтому не могу точно сказать, где была проблема.Я знаю, что было трудно заставить комбинированные массивы работать с функциями $ .each ().

Проблема заключалась в том, что

$. Each () не работал на комбинированныхмассивы.Это, однако, сработало, если вы использовали цикл for ... in ...См. JSFIDDLE .

Обратите внимание, что вы ничего не получаете в консоли или в предупреждении, если вы пытались получить значения из squareObj или circleObj.Я думаю, это потому, что он превратился в объект.Но я не знаком с этим, поэтому не могу сказать наверняка.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...