0

私は現在、基本的な加熱タイマー機能を作成しようとしています。時間、分、温度で1日あたり6つのスイッチがあります。私の知識は非常に限られており、このサイトから多くのことをハッキングしたりごまかしたりして、先に進むのを助けています.

限られたプログラミング知識で何かを作成するための最も基本的な方法は、Jquery Mobile Select Widget を使用することです。

私はそれをすべてHTML経由で正常に作成しましたが、私のコードは巨大で、1日24時間、分は5分間隔で、12分のオプションと35の温度範囲オプションを提供します。

動作するようになったら、コード サイズを縮小し、JavaScript を介して繰り返す方法を探しました。

私はこのhttp://jsfiddle.net/qsafmw5g/1/を見つけました。これは優れており、データを複数回ロードする方法を理解するのに役立ちました。

var data = [{"chapterId":1,"chapterName":"First"},{"chapterId":2,"chapterName":"Second"}];

$(data).each(function() {
  var option = $('<option />');
     option.attr('value', this.chapterId ).text(this.chapterName );
     $('#comboChapters').append(option);
});

$('#comboChapters').selectmenu('refresh', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select name="comboChapters" id="comboChapters" data-native-menu="false">
</select>

それ以来、私はこれから独自のコードを作成しましたが (まだ粗い)、私のソフトウェアは値を最後のスイッチ (番号 6) にロードするだけで、他の 5 つのスイッチは空白のままにしています。

私は自分のコードを減らして、月曜日に 6 つのスイッチのバンクを表示し、他のものを削除しようとしました。

JSFiddle こちらhttps://jsfiddle.net/adonegan/3yx2p7rf/

// Data Setup for Heater Controls

var hour_data = [{
  "optionId": 0,
  "optionValue": "00"
}, {
  "optionId": 1,
  "optionValue": "01"
}, {
  "optionId": 2,
  "optionValue": "02"
}, {
  "optionId": 3,
  "optionValue": "03"
}, {
  "optionId": 4,
  "optionValue": "04"
}, {
  "optionId": 5,
  "optionValue": "05"
}, {
  "optionId": 6,
  "optionValue": "06"
}, {
  "optionId": 7,
  "optionValue": "07"
}, {
  "optionId": 8,
  "optionValue": "08"
}, {
  "optionId": 9,
  "optionValue": "09"
}, {
  "optionId": 10,
  "optionValue": "10"
}, {
  "optionId": 11,
  "optionValue": "11"
}, {
  "optionId": 12,
  "optionValue": "12"
}, {
  "optionId": 13,
  "optionValue": "13"
}, {
  "optionId": 14,
  "optionValue": "14"
}, {
  "optionId": 15,
  "optionValue": "15"
}, {
  "optionId": 16,
  "optionValue": "16"
}, {
  "optionId": 17,
  "optionValue": "17"
}, {
  "optionId": 18,
  "optionValue": "18"
}, {
  "optionId": 19,
  "optionValue": "19"
}, {
  "optionId": 20,
  "optionValue": "21"
}, {
  "optionId": 22,
  "optionValue": "22"
}, {
  "optionId": 23,
  "optionValue": "23"
}];

var min_data = [{
  "optionId": 0,
  "optionValue": "00"
}, {
  "optionId": 1,
  "optionValue": "05"
}, {
  "optionId": 2,
  "optionValue": "10"
}, {
  "optionId": 3,
  "optionValue": "15"
}, {
  "optionId": 4,
  "optionValue": "20"
}, {
  "optionId": 5,
  "optionValue": "25"
}, {
  "optionId": 6,
  "optionValue": "30"
}, {
  "optionId": 7,
  "optionValue": "35"
}, {
  "optionId": 8,
  "optionValue": "40"
}, {
  "optionId": 9,
  "optionValue": "45"
}, {
  "optionId": 10,
  "optionValue": "50"
}, {
  "optionId": 11,
  "optionValue": "55"
}];

var temp_data = [{
  "optionId": 0,
  "optionValue": "0°c"
}, {
  "optionId": 1,
  "optionValue": "1°c"
}, {
  "optionId": 2,
  "optionValue": "2°c"
}, {
  "optionId": 3,
  "optionValue": "3°c"
}, {
  "optionId": 4,
  "optionValue": "4°c"
}, {
  "optionId": 5,
  "optionValue": "5°c"
}, {
  "optionId": 6,
  "optionValue": "6°c"
}, {
  "optionId": 7,
  "optionValue": "7°c"
}, {
  "optionId": 8,
  "optionValue": "8°c"
}, {
  "optionId": 9,
  "optionValue": "9°c"
}, {
  "optionId": 10,
  "optionValue": "10°c"
}, {
  "optionId": 11,
  "optionValue": "11°c"
}, {
  "optionId": 12,
  "optionValue": "12°c"
}, {
  "optionId": 13,
  "optionValue": "13°c"
}, {
  "optionId": 14,
  "optionValue": "14°c"
}, {
  "optionId": 15,
  "optionValue": "15°c"
}, {
  "optionId": 16,
  "optionValue": "16°c"
}, {
  "optionId": 17,
  "optionValue": "17°c"
}, {
  "optionId": 18,
  "optionValue": "18°c"
}, {
  "optionId": 19,
  "optionValue": "19°c"
}, {
  "optionId": 20,
  "optionValue": "21°c"
}, {
  "optionId": 22,
  "optionValue": "22°c"
}, {
  "optionId": 23,
  "optionValue": "23°c"
}];


$(hour_data).each(function() {
  var option = $('<option />');
  option.attr('value', this.optionId).text(this.optionValue),
    $('#mon_hour_timer_one').append(option);
  $('#mon_hour_timer_two').append(option);
  $('#mon_hour_timer_three').append(option);
  $('#mon_hour_timer_four').append(option);
  $('#mon_hour_timer_five').append(option);
  $('#mon_hour_timer_six').append(option);
});

$(min_data).each(function() {
  var option = $('<option />');
  option.attr('value', this.optionId).text(this.optionValue);
  $('#mon_min_timer_one').append(option);
  $('#mon_min_timer_two').append(option);
  $('#mon_min_timer_three').append(option);
  $('#mon_min_timer_four').append(option);
  $('#mon_min_timer_five').append(option);
  $('#mon_min_timer_six').append(option);
});

$(temp_data).each(function() {
  var option = $('<option />');
  option.attr('value', this.optionId).text(this.optionValue);
  $('#mon_temp_range_one').append(option);
  $('#mon_temp_range_two').append(option);
  $('#mon_temp_range_three').append(option);
  $('#mon_temp_range_four').append(option);
  $('#mon_temp_range_five').append(option);
  $('#mon_temp_range_six').append(option);
});

$('#mon_hour_timer_one').selectmenu('refresh', true);
$('#mon_hour_timer_two').selectmenu('refresh', true);
$('#mon_hour_timer_three').selectmenu('refresh', true);
$('#mon_hour_timer_four').selectmenu('refresh', true);
$('#mon_hour_timer_five').selectmenu('refresh', true);
$('#mon_hour_timer_six').selectmenu('refresh', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!-- Heating Controls & Settings Page -->
<div id="heating" data-role="page">
  <div data-role="content">
    <div class="ui-field-contain">
      <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Switch1:</legend>
        <select name="mon_hour_timer_one" id="mon_hour_timer_one" data-mini="true"></select>
        <select name="mon_min_timer_one" id="mon_min_timer_one" data-mini="true"></select>
        <select name="mon_temp_range_one" id="mon_temp_range_one" data-mini="true"></select>
      </fieldset>
      <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Switch2:</legend>
        <select name="mon_hour_timer_two" id="mon_hour_timer_two" data-mini="true"></select>
        <select name="mon_min_timer_two" id="mon_min_timer_two" data-mini="true"></select>
        <select name="mon_temp_range_two" id="mon_temp_range_two" data-mini="true"></select>
      </fieldset>
      <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Switch3:</legend>
        <select name="mon_hour_timer_three" id="mon_hour_timer_three" data-mini="true"></select>
        <select name="mon_min_timer_three" id="mon_min_timer_three" data-mini="true"></select>
        <select name="mon_temp_range_three" id="mon_temp_range_three" data-mini="true"></select>
      </fieldset>
      <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Switch4:</legend>
        <select name="mon_hour_timer_four" id="mon_hour_timer_four" data-mini="true"></select>
        <select name="mon_min_timer_four" id="mon_min_timer_four" data-mini="true"></select>
        <select name="mon_temp_range_four" id="mon_temp_range_four" data-mini="true"></select>
      </fieldset>
      <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Switch5:</legend>
        <select name="mon_hour_timer_five" id="mon_hour_timer_five" data-mini="true"></select>
        <select name="mon_min_timer_five" id="mon_min_timer_five" data-mini="true"></select>
        <select name="mon_temp_range_five" id="mon_temp_range_five" data-mini="true"></select>
      </fieldset>
      <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Switch6:</legend>
        <select name="mon_hour_timer_six" id="mon_hour_timer_six" data-mini="true"></select>
        <select name="mon_min_timer_six" id="mon_min_timer_six" data-mini="true"></select>
        <select name="mon_temp_range_six" id="mon_temp_range_six" data-mini="true"></select>
      </fieldset>
    </div>
  </div>
</div>

私は最初のjsfiddleで遊んで、その1つの関数から複数の選択をロードすることもできないことに気付きました。

私の関数をどのように機能させて、すべてのリストに入力することができるかを教えてくれる人が親切でしょうか.

4

1 に答える 1

0

動的ページ作成へようこそ! ご覧のとおり、コード内で何かを繰り返さなければならない場合は、別の方法で実行できることがわかっています。これが私のものです：

HTML

<div id="heating" data-role="page">
  <div data-role="content">
    <div class="ui-field-contain" id="content">
    </div>
  </div>
</div>

JavaScript

$(document).on("pageinit", "#heating", function(event)
{
    var switch_number = 6;

    var html = "";
    for (var s = 0; s != switch_number; s++)
    {
        html += '<fieldset data-role="controlgroup" data-type="horizontal">';
        html += '<legend>Switch ' + s + ':</legend>';
        html += '<select id="mon_hour_timer_' + s + '" data-mini="true">';

        for (var h = 0; h != 24; h++)
            html += '<option value="' + h + '">' + h + '</option>';

        html += '</select>';
        html += '<select id="mon_min_timer_' + s + '" data-mini="true">';

        for (var m = 0; m != 60; m += 5)
            html += '<option value="' + m + '">' + m + '</option>';

        html += '</select>';
        html += '<select id="mon_temp_range_' + s + '" data-mini="true">';

        for (var t = 0; t != 24; t++)
            html += '<option value="' + t + '">' + t + ' &deg; C</option>';

        html += '</select>';
        html += '</fieldset>';
    }

    $("#content").html(html);
    $("#content").trigger("create");
});
于 2015-04-10T13:18:21.117 に答える