我需要创建一个小的jquery插件,但是有一个非常奇怪的问题

时间:2016-02-12 11:03:48

标签: javascript jquery jquery-plugins

点击此处jsfiddle

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.BorderFactory;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

public class Example {

    public Example() {

        JPanel parentPanel = new JPanel(new GridBagLayout());
        parentPanel.setBorder(BorderFactory.createLineBorder(Color.BLACK));

        GridBagConstraints gbc = new GridBagConstraints();
        gbc.fill = GridBagConstraints.BOTH;
        gbc.weighty = 1;
        gbc.weightx = 1;
        gbc.gridheight = 2;
        parentPanel.add(createChildPanel(1), gbc);
        gbc.gridx = 1;
        gbc.gridy = 0;
        gbc.gridheight = 1;
        parentPanel.add(createChildPanel(2), gbc);
        gbc.gridx = 1;
        gbc.gridy = 1;
        parentPanel.add(createChildPanel(3), gbc);

        JFrame frame = new JFrame();
        frame.getContentPane().setLayout(new GridBagLayout());
        frame.getContentPane().add(parentPanel);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(600, 400);
        frame.setResizable(false);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }

    private JPanel createChildPanel(int number) {
        JPanel panel = new JPanel(new BorderLayout()) {
            @Override
            public Dimension getPreferredSize() {
                return new Dimension(150, 150);
            }
        };

        JPanel addPanel = new JPanel();
        addPanel.setBorder(BorderFactory.createMatteBorder(1, 0, 1, 0, Color.LIGHT_GRAY));

        JButton addButton = new JButton("+");
        addButton.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent arg0) {
                addPanel.add(new JLabel("Label"));
                addPanel.revalidate();
                addPanel.repaint();
            }
        });

        JButton deleteButton = new JButton("-");
        deleteButton.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent arg0) {
                if (addPanel.getComponentCount() > 0) {
                    addPanel.remove(addPanel.getComponent(addPanel.getComponentCount() - 1));
                    addPanel.revalidate();
                    addPanel.repaint();
                }
            }
        });

        JPanel buttonPanel = new JPanel();
        buttonPanel.add(addButton);
        buttonPanel.add(deleteButton);

        JLabel label = new JLabel(String.valueOf(number));
        label.setHorizontalAlignment(JLabel.CENTER);

        panel.setBorder(BorderFactory.createLineBorder(Color.GRAY));
        panel.add(label, BorderLayout.NORTH);
        panel.add(addPanel);
        panel.add(buttonPanel, BorderLayout.SOUTH);
        return panel;
    }

    public static void main(String[] args) {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                new Example();
            }
        });
    }

}

当我点击任何按钮时,它会提醒第一个按钮的data-id属性,

但我需要它来显示点击按钮的data-id attr ..

1 个答案:

答案 0 :(得分:2)

问题是在点击处理程序中使用base,您应该使用this,因为base是插件所附加的所有匹配元素,而不仅仅是点击元素。

您应该这样做,放弃base变量,然后返回this.each(...以使其可链接

$(function() {
    $.fn.my_alert = function() {
        return this.each(function() {
            $(this).on('click', function(e) {
                alert( $(this).data('id') );
            });
        });
    }
});