0

我创建了一个带有动态保存和删除按钮的文本框；我怎样才能让它发挥作用？这是我的编码：

$("#canvas").click(function (e) {
    var offset = $(this).offset();
    $("#position").text((e.clientX - offset.left) + ", " + (e.clientY - offset.top));
    $("#position").empty();

    var input = $("<input type='text' value='' class='addtext' id='addText'>");
    var save = $("<input type='button' class='save' value='save' id='save'>");
    var discard = $("<input type='button' class='discard' value='discard' id='disc'>");
    $("#position").append(input);
    $("#position").append(save);
    $("#position").append(discard);
    $("#position").css('position', 'absolute');
    $("#position").css('left', e.clientX - offset.left);
    $("#position").css('top', e.clientY);

    var xcor = $("#x-text");
    var ycor = $("#y-text");
    var ctext = $("#content-text");
    var atext = $("#addText");
});

如果我在里面使用下面的代码，$("#canvas").click(function(e){它工作正常，但我怎样才能将它用作一个单独的函数。我哪里错了？

$('.discard').click(function () {
    alert('test');
    $('#position').empty();
});

$('.save').click(function () {
    ctext.val(atext.val());
    xcor.val(e.clientX - offset.left);
    ycor.val(e.clientY);
    $(this).parent().empty();

});
4

2 回答 2

0

您需要使变量在其他函数中可用。如果您在画布的单击函数中创建变量，则这些变量仅在此单击函数中可用。拒绝 click 函数外的变量或使其成为全局变量：

$("#canvas").click(function(e){

                var offset = $(this).offset();
                $("#position").text((e.clientX - offset.left) + ", " + (e.clientY - offset.top));
                $("#position").empty();
                var input = $("<input type='text' value='' class='addtext' id='addText'>");
                var save = $("<input type='button' class='save' value='save' id='save'>");
                var discard = $("<input type='button' class='discard' value='discard' id='disc'>");
                $("#position").append(input);
                $("#position").append(save);
                $("#position").append(discard);
                $("#position").css('position', 'absolute');
                $("#position").css('left', e.clientX - offset.left);
                $("#position").css('top', e.clientY);
                xcor = $("#x-text"); // global var
                ycor = $("#y-text"); // global var
                ctext = $("#content-text"); // global var
                atext = $("#addText"); // global var

        });

或者：

var xcor = $("#x-text");
                    var ycor = $("#y-text");
                    var ctext = $("#content-text");
                    var atext = $("#addText");

$("#canvas").click(function(e){

                        var offset = $(this).offset();
                        $("#position").text((e.clientX - offset.left) + ", " + (e.clientY - offset.top));
                        $("#position").empty();
                        var input = $("<input type='text' value='' class='addtext' id='addText'>");
                        var save = $("<input type='button' class='save' value='save' id='save'>");
                        var discard = $("<input type='button' class='discard' value='discard' id='disc'>");
                        $("#position").append(input);
                        $("#position").append(save);
                        $("#position").append(discard);
                        $("#position").css('position', 'absolute');
                        $("#position").css('left', e.clientX - offset.left);
                        $("#position").css('top', e.clientY);


                });
于 2013-06-10T21:31:18.100 回答
0

问题是您的变量的范围是点击回调函数。你需要以某种方式暴露它们。一种可能的方法是让一个对象持有它们。此外，如果您要在运行时附加这些事件，您可能还希望在 click 事件中执行此操作。请注意，我缓存了位置元素并以$. 这是因为最好的做法是以 a 开头命名您的 jQuery 对象，$这样可以访问 jQuery API 的权限就很明显了。

var ctxObj = {};
$("#canvas").click(function(e){
 var offset = $(this).offset();
 var $position = $("#position");
 $position.text((e.clientX - offset.left) + ", " + (e.clientY - offset.top)).empty();
 var $input = $("<input type='text' value='' class='addtext' id='addText'>");
 var $save = $("<input type='button' class='save' value='save' id='save'>");
 var $discard = $("<input type='button' class='discard' value='discard' id='disc'>");
 $position.append($input).append($save).append($discard);
 $position.css({position:'absolute',left:(e.clientX - offset.left),top:e.clientY});
 ctxObj.xcor = $("#x-text");
 ctxObj.ycor = $("#y-text");
 ctxObj.ctext = $("#content-text");
 ctxObj.atext = $("#addText");
 $save.click(function(){
  ctxObj.ctext.val(atext.val());
  ctxObj.xcor.val(e.clientX - offset.left);
  ctxObj.ycor.val(e.clientY);
  $(this).parent().empty();
 });
 $discard.click(function(){ 
  alert('test');
  $('#position').empty();
 });
});
于 2013-06-10T21:31:47.073 回答