向插件添加属性(不是默认方式）

Adding properties to a plugin (not the default way)

本文关键字：默认 方式 插件 添加 属性      更新时间：2023-09-26

在jQuery中，我正在创建一整套要包含在项目中的元素。该套件将包含各种元素，如按钮、输入元素、模式弹出窗口和其他元素。

现在，我正在编写的第一个控件是select（下拉菜单），它具有以下语法：

<div class="dropdown" style="height: 20px; width: 100px;">
    <div class="legend"></div>
    <ul class="elements">
        <li>Blue</li>
        <li>Green</li>
        <li>LightBlue</li>
        <li>Orange</li>
        <li>Purple</li>
        <li>Red</li>
        <li>Turquoise</li>
    </ul>
</div>

现在，我有了各种JavaScript方法来实现这一点，添加了必要的类和其他东西来确保正常工作。

现在，我确实创建了一个方法，该方法应该执行一段代码，作为元素上的属性。

$('.elements li', dropdownElement).click(function() {
    var selectedLiText = $(this).html();
    $('.legend', dropdownElement).html(selectedLiText);
    var attribute = $(dropdownElement).attr('data-on-change');
    if (typeof attribute !== 'undefined' && attribute != '') { eval(attribute); }
    $(dropdownElement).ToggleOpen();
});

因此，上面的代码确实表明，当元素上有一个名为"data on change"的属性时，它会将其转换为JavaScript函数并执行它

为了使其发挥作用，HTML应该像下面这样进行调整：

<div class="dropdown" style="height: 20px; width: 100px;" data-on-change="alert('demo');">
    <div class="legend"></div>
    <ul class="elements">
        <li>Blue</li>
        <li>Green</li>
        <li>LightBlue</li>
        <li>Orange</li>
        <li>Purple</li>
        <li>Red</li>
        <li>Turquoise</li>
    </ul>
</div>

这将打开一个弹出窗口，并显示文本"Demo"。

有关加工，请参阅本JsFiddle。注意：没有样式，所以它看起来不像DropDown，但只需单击UL中的一个元素，就会显示弹出窗口。

我想做的是，在我的插件中公开something，使我能够获得所选项目。

所以我希望能够形成我的数据的变化函数，这样：

data-on-change="alert(selectedItem)"

或者

data-on-change="alert(this.selectedItem)".

欢迎所有想法。

我可能会使用function名称定义，而不是eval()。只需输入一个要由事件调用的函数名，然后传递所需的参数。

类似。。

if (typeof attribute !== 'undefined' && attribute != '') { 
    //eval(attribute); 
    if (typeof(window[attribute]) == 'function'){
        // you can pass anything as the argument here..
        window[attribute].call(this, {selectedText: selectedLiText});
    }
}

HTML就像一样

<div class="dropdown" style="height: 20px; width: 100px;" data-on-change="InvokeFunction">

和事件处理程序本身

window.InvokeFunction = function(args){
    alert(args.selectedText);
}

我更新了jsfiddle：https://jsfiddle.net/xq0d0y6r/2/

相关文章：