2016-11-18 6 views
1

Я пытаюсь создать калькулятор клавиатуры. Функции Onclick работают правильно. Моя проблема связана с .each() funtion. Как я могу пройти через мой buttonArray?. Я не мог обрабатывать вложенные массивы и добавлял <p> к <div>, как тот же <input>, прилагаемый к <p>.Javascript вложенная функция .each()

Мой сценария как:

var buttonArray = [ 
    [{ 
     type: 'button', 
     className: 'sil', 
     value: 'C' 
    }, { 
     type: 'button', 
     className: 'hepsiniSil', 
     value: 'AC' 
    }, 

    ], 
    [{ 
    type: 'button', 
    className: 'buttons', 
    value: '7' 
    }, { 
    type: 'button', 
    className: 'buttons', 
    value: '8' 
    }, { 
    type: 'button', 
    className: 'buttons', 
    value: '9' 
    }, { 
    type: 'button', 
    className: 'buttons', 
    value: '*' 
    }], 
    [{ 
    type: 'button', 
    className: 'buttons', 
    value: '4' 
    }, { 
    type: 'button', 
    className: 'buttons', 
    value: '5' 
    }, { 
    type: 'button', 
    className: 'buttons', 
    value: '6' 
    }, { 
    type: 'button', 
    className: 'buttons', 
    value: '-' 
    }], 
    [{ 
    type: 'button', 
    className: 'buttons', 
    value: '1' 
    }, { 
    type: 'button', 
    className: 'buttons', 
    value: '2' 
    }, { 
    type: 'button', 
    className: 'buttons', 
    value: '3' 
    }, { 
    type: 'button', 
    className: 'buttons', 
    value: '+' 
    }], 
    [{ 
    type: 'button', 
    className: 'buttons', 
    value: '0' 
    }, { 
    type: 'button', 
    className: 'esit', 
    value: '=', 
    click: 'esittir' 
    }, { 
    type: 'button', 
    className: 'buttons', 
    value: '/' 
    }] 
] 

$(document).ready(function() { 
    $.each(function(index, buttonArray) { 
    $("<p>").each(function(subIndex, subArrays) { 
     $("<input>") 
     .addClass(subArrays.className) 
     .val(subArrays.val) 
     .appendTo(this) 
    }); 
    }); 
}); 

и я хочу, чтобы этот выход:

<p> 
 
    <input type="button" class="sil" value="C" style="width:50px"> 
 
    <input type="button" class="hepsiniSil" value="AC" style="width:50px"> 
 
</p> 
 
<p> 
 
    <input type="button" class="buttons" value="7"> 
 
    <input type="button" class="buttons" value="8"> 
 
    <input type="button" class="buttons" value="9"> 
 
    <input type="button" class="buttons" value="*"> 
 
</p> 
 
<p> 
 
    <input type="button" class="buttons" value="4"> 
 
    <input type="button" class="buttons" value="5"> 
 
    <input type="button" class="buttons" value="6"> 
 
    <input type="button" class="buttons" value="-"> 
 
</p> 
 
<p> 
 
    <input type="button" class="buttons" value="1"> 
 
    <input type="button" class="buttons" value="2"> 
 
    <input type="button" class="buttons" value="3"> 
 
    <input type="button" class="buttons" value="+"> 
 
</p> 
 
<p> 
 
    <input type="button" class="buttons" value="0"> 
 
    <input type="button" class="esit" value="=" style="width:50px" onclick='esittir()'> 
 
    <input type="button" class="buttons" value="/"> 
 

 
</p>

+0

Есть ли какая-то ошибка? Вы можете проверить консоль? –

+0

Ошибок нет. Но я уверен, что функция '.each()' не должна быть такой. @RaxWeber –

+1

Ваш цикл 'each' не принимает' buttonArray' в цикл. Измените это так: '$ .each (buttonArray, function (index, value)' И вы должны изменить другие коды в соответствии с этим. – Qsprec

ответ

6

$.each первого параметр является массивом итерации, то второй является обратным вызовом :

jQuery.each (массив, обратный вызов)

Обратный вызов возвращает повторную деталь как 2-й пары:

обратного вызова

Тип: Функция (целое число indexInArray, значение объекта) функция, которая будет выполняться на каждом объекте.

Кроме this в $.each() является значение элемента, вы не можете добавить к нему.

Вам необходимо выполнить итерацию внешнего массива, создать элемент <p> и добавить его в контейнер. Тогда итерацию суб массивы, создать <input> (или просто <button> элемент), и добавить их в свои <p> контейнер:

var buttonArray = [ 
 
    [{ 
 
     type: 'button', 
 
     className: 'sil', 
 
     value: 'C' 
 
    }, { 
 
     type: 'button', 
 
     className: 'hepsiniSil', 
 
     value: 'AC' 
 
    }, 
 

 
    ], 
 
    [{ 
 
    type: 'button', 
 
    className: 'buttons', 
 
    value: '7' 
 
    }, { 
 
    type: 'button', 
 
    className: 'buttons', 
 
    value: '8' 
 
    }, { 
 
    type: 'button', 
 
    className: 'buttons', 
 
    value: '9' 
 
    }, { 
 
    type: 'button', 
 
    className: 'buttons', 
 
    value: '*' 
 
    }], 
 
    [{ 
 
    type: 'button', 
 
    className: 'buttons', 
 
    value: '4' 
 
    }, { 
 
    type: 'button', 
 
    className: 'buttons', 
 
    value: '5' 
 
    }, { 
 
    type: 'button', 
 
    className: 'buttons', 
 
    value: '6' 
 
    }, { 
 
    type: 'button', 
 
    className: 'buttons', 
 
    value: '-' 
 
    }], 
 
    [{ 
 
    type: 'button', 
 
    className: 'buttons', 
 
    value: '1' 
 
    }, { 
 
    type: 'button', 
 
    className: 'buttons', 
 
    value: '2' 
 
    }, { 
 
    type: 'button', 
 
    className: 'buttons', 
 
    value: '3' 
 
    }, { 
 
    type: 'button', 
 
    className: 'buttons', 
 
    value: '+' 
 
    }], 
 
    [{ 
 
    type: 'button', 
 
    className: 'buttons', 
 
    value: '0' 
 
    }, { 
 
    type: 'button', 
 
    className: 'esit', 
 
    value: '=', 
 
    click: 'esittir' 
 
    }, { 
 
    type: 'button', 
 
    className: 'buttons', 
 
    value: '/' 
 
    }] 
 

 
]; 
 

 

 
var $calculator = $('#calculator'); 
 

 
$.each(buttonArray, function(index, buttons) { 
 
    var $p = $('<p>').appendTo($calculator); 
 

 
    $.each(buttons, function(subIndex, button) { 
 
    $('<input>') 
 
     .addClass(button.className) 
 
     .prop('type', button.type) 
 
     .val(button.value) 
 
     .appendTo($p) 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="calculator"></div>

+0

Спасибо, сэр, это сработало. Еще один вопрос: как я могу обрабатывать ширину ?. Некоторые из кнопок имеют свойство ширины. –

+1

аналогично обработке 'className', просто настроил свойство до и его процесс: '.width (button.myWidth)' – arhak

+0

http://api.jquery.com/width/#width-value – arhak

Смежные вопросы