Question

我有一个表格，我希望这些单元格可以更改。我的想法是点击表格单元格，然后从弹出框内容中选择一个类。为此我使用jQuery插件WebUI Popover。应该将选中的类写入（或重写）到我之前单击过的单元格中。

示例代码位于 JSFIDDLE 。它可能看起来像一个颜色选择器，但它不是。

问题：

我不知道如何实现与插件类的通信。更改单元类的代码应如下所示：

$(this).$('td').removeClass().addClass('class_I_selected_from_popover_content');

但我不知道如何将其与插件连接。

Answer 1

使用插件时最常用的方法是利用插件公开的事件。

$('#myTable td').webuiPopover({
        title: '',
        content: '<a href="#" class="redClass"><span>change to red class</span></a> <a href="#" class="blueClass"><span>change to blue class</span></a> <a href="#" class="greenClass"><span>change to green class</span></a> <a href="#" class="grayClass"><span>change to gray class</span></a>',
        closeable: true,
        width: 200,
        arrow: true,
        placement: 'auto'
    }).on('show.webui.popover hide.webui.popover', function(e){
        $('td.active-cell').removeClass('active-cell');
        $(this).addClass('active-cell');            
    });

    $(document).on('click', '.webui-popover-content a', function(){
        $('td.active-cell')
              .removeClass('redClass grayClass blueClass greenClass')
              .addClass( $(this).attr('class'));
    });

当弹出窗口显示并隐藏时，上面将切换班级active-cell。

添加其他点击处理程序的建议可能会导致由于次要点击而导致的错误，这可能会导致意外更改

的 DEMO

Answer 2

我不知道如何使用这个插件，但我有一些技巧来解决这个问题。

我希望它可以根据您的需要运作。

var flag = null;
$(document).ready(function ($) {        
    $('#myTable td').webuiPopover({
        title: '',
        content: '<a href="#" class="redClass"><span>change to red class</span></a> <a href="#" class="blueClass"><span>change to blue class</span></a> <a href="#" class="greenClass"><span>change to green class</span></a> <a href="#" class="grayClass"><span>change to gray class</span></a>',
        closeable: true,
        width: 200,
        arrow: true,
        placement: 'auto'
    }).click(function(){
        flag = $(this);
    });
    
    $('body').on('click', 'a', function(){
        var newClass = $(this).attr('class');
        flag.removeClass().addClass(newClass);
    });
});

通过单击弹出窗口内容更改表类

问题：

2 个答案: