Question

我已经创建了一个函数，如果我选中一个复选框，文本将被添加到textarea。我有几个复选框，所以当我取消选中任何复选框时，我不希望textarea变空。我的代码有效，但问题是代码编码非常糟糕，并且加载时间太长，因为这是针对移动网站我需要缩短它，任何帮助都表示赞赏。

$(document).ready(function () {
    $('#checkbox-6').change(function () {
        if ($(this).is(':checked')) {
            $('#append').append(' Till - Hiss finnes ')
        } else {
            var thiss = $('#append');
            thiss.html(thiss.html().replace(/ Till - Hiss finnes /ig, ""));
        }
    });
    $('#checkbox-7').change(function () {
        if ($(this).is(':checked')) {
            $('#append').append(' Behöver hjälp med uppackning ')
        } else {
            var upack = $('#append');
            upack.html(upack.html().replace(/ Behöver hjälp med uppackning /ig, ""));
        }
    });
    $('#ch1').change(function () {
        if ($(this).is(':checked')) {
            $('#append').append(' Från - Hiss finnes ')
        } else {
            var fhiss = $('#append');
            fhiss.html(fhiss.html().replace(/ Från - Hiss finnes /ig, ""));
        }
    });
    $('#ch2').change(function () {
        if ($(this).is(':checked')) {
            $('#append').append(' Packning ')
        } else {
            var pack = $('#append');
            pack.html(pack.html().replace(/ Packning /ig, ""));
        }
    });
    $('#ch3').change(function () {
        if ($(this).is(':checked')) {
            $('#append').append(' Vind Källare Förråd ')
        } else {
            var attic = $('#append');
            attic.html(attic.html().replace(/ Vind Källare Förråd /ig, ""));
        }
    });
    $('#ch4').change(function () {
        if ($(this).is(':checked')) {
            $('#append').append(' Flyttstädning ')
        } else {
            cleaning = $('#append');
            cleaning.html(cleaning.html().replace(/ Flyttstädning /ig, ""));
        }
    });
    $('#ch5').change(function () {
        if ($(this).is(':checked')) {
            $('#append').append(' Behöver flyttkartonger ')
        } else {
            var boxes = $('#append');
            boxes.html(boxes.html().replace(/ Behöver flyttkartonger /ig, ""));
        }
    });
});

谢谢！

Answer 1

function min(id, append, unpack)
{
    $(id).change(function() {
        if ($(this).is(':checked')) {
            $('#append').append(append)
        } else {
            var thiss = $('#append');
            thiss.html(thiss.html().replace(unpack, ""));
        }
    });
}

$(document).ready(function() {
    min('#checkbox-6', ' Till - Hiss finnes ', / Till - Hiss finnes /ig);
    min('#checkbox-7', ' Behöver hjälp med uppackning ', / Behöver hjälp med uppackning /ig);
    // ETC
});

你只需要像程序员一样思考，看看一切都有什么共同点。

Answer 2

你可以试试这个。

var texts = {
   "ch1": " Från - Hiss finnes ",
   "ch2": " Packning ",
   "ch3": " Vind Källare Förråd ",
   "ch4": " Flyttstädning ", 
   "ch5": " Behöver flyttkartonger ", 
   "checkbox-6": " Till - Hiss finnes ",
   "checkbox-7": " Behöver hjälp med uppackning ",
}

$(document).ready(function(){
   $(':checkbox').change(function(){
      var $textArea = $('#append');
      if(this.checked){
          $textArea.append(texts[this.id])
      }else{
           $textArea.html($textArea.html().replace(texts[this.id], ""));
      }
    });
});

Answer 3

有许多缩小工具可供使用，我倾向于使用Google的Closure Compiler。以下是您可以使用的在线版link。

如何改进我的jquery复选框脚本

3 个答案: