如何从js获取zk元素id [英] How get the zk element id from js

问题描述

我正在使用ZK，我想从js获取zk元素的id。
我使用了不同的方式：

I am working with ZK and I want to get the id of the a zk element from js. I have used differents ways:

声明组件就像本机html一样，它从js获取id但是它不正确。
我已经使用ZK的html标签声明了元素，但也不正确。
我见过一些像Component.getFellow（'component_name'）这样的函数，最后我读到了UUID并使用了一些示例代码，但我不能使用元素id，例如：

Declaring the component like native html and it gets the id from js but it isn't correct. I have declared the element using the html tags of ZK but isn't correct too. I have seen some functions like Component.getFellow('component_name') and finally I have read about the UUID and use some example codes but I can't the element id for example:

<label id=titleBook/>

来自javaScript。

from javaScript.

任何想法？
谢谢。

any idea? Thank you.

推荐答案

您遇到的问题是 id 你在ZUL中分配一个元素（ZK标记）与呈现的DOM元素id 不是一对一的。 ZK之所以这样做有很多原因，但需要注意的是你需要在不知道他们身份的情况下引用DOM元素。

The problem you're running into is that the id you assign an element in ZUL (ZK markup) is not one-to-one with the rendered DOM element id. ZK does this for a number of reasons, but the take away is that you need to reference the DOM elements without knowing their id.

ZK通过给你一个简单的方法JavaScript框架也是如此，他们将其称为客户端编程。

ZK makes this easy by giving you a JavaScript framework also, they refer to it as 'Client Side Programming' a lot.

查看ZK关于客户端编程的文档，特别是关于如何在JavaScript中获取小工具参考。

Have a look at ZK's documentation on Client Side Programming, specifically the paragraph on "How to Get Widget Reference in JavaScript".

在这里你会看到 ZK JavaScript API 提供

<zk xmlns:w="http://www.zkoss.org/2005/zk/client">
    <label id="titleBook"/>
    <button label="button"
            w:onClick="this.$f('titleBook').setValue('sean is cool')" />
</zk>

请注意，我正在定义 w 命名空间成为ZK的客户端库只是为了触发客户端 onClick 事件，我可以访问这个，按钮小部件。

Note that I am defining the w namespace to be ZK's client library just to fire the client side onClick event where I have access to this, the Button widget.

听起来你可能在vanilla工作，JS会做更多的事情......

It sounds like you are probably working in vanilla JS would do something more like..

<zk>
    <script defer="true">
        jq("$titleBook").css('color', 'green');
        zk("$titleBook").setValue('sean is cool');
    </script>
    <label id="titleBook"/>
</zk>

这里我们利用 jq（） 和 zk（） 全局变量。前者只是jQuery的 $（），后者是ZK对应物。不同之处在于jQuery函数返回jQuery对象，而后者返回ZK小部件。两者都被扩展为支持新的 $ CSS样式选择器，它引用ZK窗口小部件ID（您在ZUL / Java中分配的内容）。

Here we're leveraging the jq() and zk() globals in the ZK JavaScript APIs. The former is just jQuery's $() and the latter is the ZK counterpart. The difference is that the jQuery function returns a jQuery object while the latter returns a ZK widget. Both are extended to support the new $ CSS style selector which references the ZK widget id (what you assigned in ZUL/Java).

这篇关于如何从js获取zk元素id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！