Question

请原谅我，因为我只是一名OOPHP开发人员，但是，我正在尝试将客户端实时聊天与朋友整合*。

我制作了真实数据的演示版，这是我当前的代码：

import matplotlib
matplotlib.use('TkAgg')

import tkinter as tk
from tkinter import ttk

from numpy import arange, sin, pi
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg, NavigationToolbar2TkAgg
# implement the default mpl key bindings
#from matplotlib.backend_bases import key_press_handler
from matplotlib.figure import Figure

class moshGUI(tk.Tk):

    def __init__(self, *args, **kwargs):  #kwargs Dictionary, args - arguments
        tk.Tk.__init__(self, *args, **kwargs)
        tk.Tk.title(self, "mosh_GUI")
        #tk.Tk.iconbitmap(self, default="C:\TuhhSq.ico")

        container = tk.Frame(self)
        container.pack(side="top", fill="both", expand = True)
        container.grid_rowconfigure(0, weight=1)
        container.grid_columnconfigure(0, weight=1)

        menubar = tk.Menu(container)
        filemenu = tk.Menu(menubar, tearoff=0)
        filemenu.add_command(label="New Experiment", command= lambda: popupmsg("that is not defined yet"))
        filemenu.add_separator()
        filemenu.add_command(label="Run From a File", command= quit)
        filemenu.add_separator()
        filemenu.add_command(label="Exit", command= quit)
        menubar.add_cascade(label="File", menu=filemenu)

        tk.Tk.config(self,menu=menubar)

        self.frames = {} #dic

        for F in (Startpage,):#, Page1, Page2, Page3):
            frame = F(container, self)
            self.frames[F] = frame
            frame.grid(row=0, column=0, sticky="nsew")

        self.show_frame(Startpage)

    def show_frame(self, cont):

        frame = self.frames[cont]
        frame.tkraise()


class Startpage(tk.Frame) :

    def __init__(self, parent, controller):
        tk.Frame.__init__(self,parent)

        ###Button Plot1 

        button1 = ttk.Button(self, text="Plot1", 
                            command= lambda: controller.show_frame(Page1) )
        button1.grid(row=0, column=0)
        ###Button Plot2 

        button2 = ttk.Button(self, text="Plot2", 
                            command= lambda: controller.show_frame(Page1) )
        button2.grid(row=0, column=1)

        ###Button Plot3 

        button3 = ttk.Button(self, text="Plot3", 
                            command= lambda: controller.show_frame(Page1) )
        button3.grid(row=0, column=2)

        ###Button Plot4 

        button4 = ttk.Button(self, text="Plot4", 
                            command= lambda: controller.show_frame(Page1) )
        button4.grid(row=0, column=3)

        ###Matplotlib

        f = Figure(figsize=(5, 4), dpi=100)
        a = f.add_subplot(111)
        t = arange(0.0, 3.0, 0.01)
        s = sin(2*pi*t)

        a.plot(t, s)

        fr = tk.Frame(self)
        fr.grid(row=1, column=0, columnspan=4)

        canvas = FigureCanvasTkAgg(f, master=fr)
        canvas.show()
        canvas.get_tk_widget().pack()

        toolbar = NavigationToolbar2TkAgg(canvas, fr)
        toolbar.update()
        canvas._tkcanvas.pack()

        ###Entry
        textbox1 = tk.Entry(self, width= 75)
        textbox1.grid(row=2, column=0, columnspan=4)
        textbox1.insert('end', "Hello World! --- Hello Tkinter! --- Hello Matplotlib!")

app = moshGUI()
app.mainloop()

var chat = {
	open: function(id) {
  	console.log(id);
  }
};

var chatBtns = document.getElementsByClassName('chat-single');

// WORKS
chatBtns[0].addEventListener('click', function() {
	chat.open(this.getAttribute('id'));
});

/* DOESNT WORK
chatBtns.forEach(function(btn){
    btn.addEventListener('click', function() {
    	chat.open(this.getAttribute('id'));
    });
});
*/

a {
  text-decoration: none;
  color: blue;
}
a:hover {
  color: purple;
}
.chat-wrapper {
  padding: 20px;
}
.chat-single {
  background: #efefef;
  padding: 5px;
  border: 1px solid #000;
}

该朋友*的唯一聊天标识保存在属性<div class='chat-wrapper'> <p class='online-friends'> Online Friends: (<span class='chat-online'>2</span>) </p> <div class='chat-friends'> <a class='chat-single' title='chat with Some Name' href='#' id='unique-id-here'>Some Name</a> <a class='chat-single' title='chat with Some Other Name' href='#' id='unique-id-here'>Some Other Name</a> </div> </div>中。点击后，每个按钮（id）都会使用chat-single属性并将其发送到id方法。

我调试了这段代码并看到chat.open()是一个数据类型的数组，因此，我查看了forEach() documentation。这里的问题是，当我说明chatBtns索引点时，它可以正常工作。当我使用0时，它会给我一个错误，表明该方法不存在。

这里的任何帮助都是完美的，我是否也可以解释它是如何工作的，这样我就能理解我所缺少的东西。

请注意我不想使用任何库来实现这一点（即：jQuery）。

Answer 1

JavaScript中有多个类似数组的对象，其行为与JavaScript Array完全不同。

您从所选内容中返回的内容为HTMLCollection。

        "original_title": "Fury",
        "original_language": "en",
        "title": "Fury",
        "backdrop_path": "\/pKawqrtCBMmxarft7o1LbEynys7.jpg",
        "popularity": 11.717304,
        "vote_count": 2435,
        "video": false,
        "vote_average": 7.43

我建议使用以下代码来获取类数组对象的数组：

document.getElementsByClassName('chat-single') instanceof HTMLCollection // true
document.getElementsByClassName('chat-single') instanceof Array // false

Array.prototype.slice.call(document.getElementsByClassName('‌chat-single'))是一个函数，用于返回调用它的数组的整个部分或部分部分的副本。

Array.prototype.slice调用slice函数，选择为call，它将类似数组的对象作为数组返回。

所以现在你实际上有一个先前数据的数组，因此可以调用this。

Answer 2

使用normal for循环迭代HTMLCollections。试试这个

＆＃13;

var chat = {
  open: function(id) {
    console.log(id);
  }
};

var chatBtns = document.getElementsByClassName('chat-single');


// WORKS
/*chatBtns[0].addEventListener('click', function() {
	chat.open(this.getAttribute('id'));
});*/

/* DOESNT WORK ==> Now it works :)*/
for (var i = 0; i < chatBtns.length; i++) {
  chatBtns[i].addEventListener('click', function() {
    chat.open(this.getAttribute('id'));
  });
}

＆＃13;

a {
  text-decoration: none;
  color: blue;
}
a:hover {
  color: purple;
}
.chat-wrapper {
  padding: 20px;
}
.chat-single {
  background: #efefef;
  padding: 5px;
  border: 1px solid #000;
}

＆＃13;

<div class='chat-wrapper'>
  <p class='online-friends'>
    Online Friends: (<span class='chat-online'>2</span>)
  </p>
  <div class='chat-friends'>
    <a class='chat-single' title='chat with Some Name' href='#' id='unique-id-here'>Some Name</a>
    <a class='chat-single' title='chat with Some Other Name' href='#' id='unique-id-here'>Some Other Name</a>
  </div>
</div>

＆＃13;

如何为Each（）类创建单击侦听器

2 个答案: