Question

我正在编写一个html控件。在html代码中，只有一个带有特定id的'div'标签。在javascript和jquery的帮助下，我调用了一个'create'函数，它动态地创建了一些按钮和一个位于'div'中的画布。现在，如果我单击一个按钮，click-eventhandler应该修改画布的某些属性。

问题：如何找到画布？

我是否必须检查按钮的父属性（或同级）并搜索画布？按钮元素是随机数据的“标记”属性吗？还是有更好的方法吗？

以下是一个示例代码，其中包含两个应该彼此独立的html控件：

<html>
<head>
<title></title>

<script type="text/javascript" src="jquery/jquery-1.7.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
    (function ($) {
        $.fn.myHtmlControl = function() {

            var btn = $('<button>B</button>');
            var c = $('<canvas/>');

            btn.button().click(function(e) {
               // change content of canvas lying in #ctrl1 if clicked button lies in #ctrl1
               // otherwice change content of canvas lying in #ctrl2
            });

            $(this).append(btn);
            $(this).append(c);
       };
    })(jQuery);

    $(function () {
        $('#ctrl1').myHtmlControl();
        $('#ctrl2').myHtmlControl();
    })
</script>

</head>
    <body>
        <div id='ctrl1' />
        <div id='ctrl2' />
    </body>
</html>

Answer 1

在创建时，只需在canvas元素中添加一个id即可。

然后你可以像任何其他具有id的元素一样搜索它。

Answer 2

所以我找到了解决问题的方法，也许有更好的解决方案......

<html>
<head>
<title></title>

<script type="text/javascript" src="jquery/jquery-1.7.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
    (function ($) {
        $.fn.myHtmlControl = function() {

            var btn = $('<button>B</button>');
            var c = $('<canvas/>');

            var t = $(this);
            t.X = 75;

            btn.button().click(function(e) {
                callX();
            });

            $(this).append(btn);
            $(this).append(c);

            function callX() {
                alert("ID: " + t.attr('id') + " X: " + t.X);
            }
       }
    })(jQuery);

    $(function () {
        $('#ctrl1').myHtmlControl();
        $('#ctrl2').myHtmlControl();
    })
</script>

</head>
    <body>
        <div id='ctrl1'>Ctrl1</div>
        <div id='ctrl2'>Ctrl2</div>
    </body>
</html>

但仍有问题。问题发生在“$ .fn.myHtmlControlKeydown（）” - 我想访问画布的函数和变量X属于调用div。

<html>
<head>
<title></title>

<script type="text/javascript" src="jquery/jquery-1.7.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
    (function ($) {
        $.fn.myHtmlControl = function() {

            var btn = $('<button>B</button>');
            var c = $('<canvas/>');

            var t = $(this);
            t.X = 75;

            btn.button().click(function(e) {
                callX();
            });

            $(this).append(btn);
            $(this).append(c);

            function callX() {
                alert("ID: " + t.attr('id') + " X: " + t.X);
            }
        }
        $.fn.myHtmlControlKeydown = function(e) {
            // access canvas and variable X from calling 'div'
        }
    })(jQuery);

    $(function () {
        $('#ctrl1').myHtmlControl();
        $('#ctrl2').myHtmlControl();
    })

    $(document).keydown(function(e) {
        $('#ctrl1').myHtmlControlKeydown(e);    // or $('#ctrl2').myHtmlControlKeydown(e);
    }); 
</script>

</head>
    <body>
        <div id='ctrl1'>Ctrl1</div>
        <div id='ctrl2'>Ctrl2</div>
    </body>
</html>

有什么想法吗？

button-click-handler需要引用其他html-control

2 个答案: