2

したがって、ユーザーが分単位で時間を加算または減算でき、そのdivを複製して値を追加できるフォームがありますが、私の問題は、複製されたdivで関数が機能しないように見えることです。この関数は、最初のdivからのみ加算または減算します。

これがjsFiddleです：http：//jsfiddle.net/W7w58/2/

+または-をクリックすると、機能が開始されます。

コードは次のとおりですが、jsFiddleを試してみると問題を理解しやすいと思います。

HTML：

<button id="clone-btn">Clone</button>
<div id="clone-div">
   <a href="#" class="btn btn-subtract">-</a>
   <a href="#" class="btn"><input type="text" class="input-field" id="input-field" name="input-field" value="0:00"></a>
   <a href="#" class="btn btn-add">+</a>
</div>

jQuery：

/* for cloning */
$("#clone-btn").click(function() {
    $('#clone-div').clone(true).insertAfter('#clone-div');
    return false;
});


/* for the function */
var $input = $('.input-field');
$input.data('minutes', parseTimeString($input.val()));

function parseTimeString(str) {
    var time = str.split(":");
    return (parseInt(time[0])*60) + parseInt(time[1]);
}

$('.btn-add').on('click', function() {
    changeTime(1);
});

$('.btn-subtract').on('click', function() {
    changeTime(-1);
});
function changeTime(mins) {
    var currentTime = parseInt($input.data('minutes')),
    newTime = currentTime + mins,
    minutes = (newTime % 60).toString(),
    hours = (Math.floor(newTime / 60)).toString();
    if (minutes.length === 0) {
        minutes = "00";
    } else if (minutes.length === 1) {
        minutes = "0" + minutes;
    }
    $input.data('minutes', newTime).val(hours + ":" + minutes);
}

私はあなたが私に与えることができるすべての助けをいただければ幸いです:)。

4

2 に答える 2

1

元のコードには次のような問題がありました。

  1. 不要なデータ属性の使用
  2. 重複 ID の使用
  3. テキストボックスの新しいコピーを処理するのではなく、元のテキストボックスを変更します。
  4. 隠れた問題:時間の計算中のコードのゼロ パディングが問題を引き起こし、1 つのテキスト ボックスではなく個々のテキスト ボックスを使用すると、時間が 0:08 までしか機能せず、その後 0:00 に戻ってしまいました。それは修正され、私のソリューションで正しく動作します。

以下は、時間の増分と減分がクローンに対しても適切に機能し、必要に応じて個別に機能する実用的なソリューションです。

このコードには、あなたが私たちのチャットで望んでいたことも含まれています - 「マイナス」ボタンをクリックしたときに0:00を下回らないようにします (例ではアラートを生成します)。それが役に立てば幸い！

また、jsfiddle: http://jsfiddle.net/vwxfC/4/

JS コード:

$("#clone-btn").click(function () {
    var last = $('.cdiv').eq(-1);
    last.clone(true).insertAfter(last);
    return false;
});

function parseTimeString(str) {
    var time = str.split(":");
    if (time[1][0] === "0") {
        time[1] = time[1].substr(1, time[1].length);
    }

    return (parseInt(time[0]) * 60) + parseInt(time[1]);
}

$('.btn-add').on('click', function () {
    changeTime(1, this);
});

$('.btn-subtract').on('click', function () {
    changeTime(-1, this);
});
function changeTime(mins, el) {
    var inp = $(el).siblings('.btninp').eq(0).children('.input-field').eq(0);

    if (inp.val() == "0:00" && mins == "-1") {

        alert("time cannot be less than 0!");
    } else {

        var ps = parseTimeString(inp.val());

        var currentTime = parseInt(ps),
        newTime = currentTime + mins,
        minutes = (newTime % 60).toString(),
        hours = (Math.floor(newTime / 60)).toString();
        if (minutes.length < 2) {
            minutes = "0" + minutes;
        }

        inp.val(hours + ":" + minutes);
    }

}

HTML コード:

<button id="clone-btn">Clone</button>
<div class = "cdiv">
  <a href="#" class="btn btn-subtract">-</a>
  <a href="#" class="btninp"><input type="text" class="input-field" value="0:00"> </input></a>
   <a href="#" class="btn btn-add">+</a>
  </div>
于 2013-01-08T15:49:10.633 に答える
0

ここにはいくつかの問題があります。

  1. タグ<div>には、id一意であることを意図した属性があります。それを複製すると、同じ を持つ 2 つの要素が作成されid、問題が発生します。class代わりに属性を使用してください。

  2. イベント ハンドラーは、動的に生成された要素を考慮していません。これを行うには、次のイベント委任構文を使用します.on()。

    $('#closest_static_parent').on('click', '.btn-add', function() {

  3. $inputハードコーディングされています。の代わりに、次を使用してに相対的な要素$inputを見つけます。<input><a>

    $(this).closest('input');
于 2013-01-08T14:25:22.743 に答える