Question

我一直在寻找一个我找不到的解决方案。

我构建了一个简单的图像滑块，每当你点击图片时，这应该随后改变。具体来说，on-click事件使用addClass和removeClass将css属性z-index移动到下一个图片。

问题是它只在你第一次按下时才起作用，而且再也没有，这意味着我只能显示第一张和第二张照片。我找不到解决方案，我正在寻找的是每次点击图片时如何让点击事件发挥作用？

var currentImg = $(".active");
var nextImg = currentImg.next();

$(".imageSlider").on("click", function() {
	alert("ciao");
	currentImg.removeClass(".active").css("z-index", 0);
	nextImg.addClass(".active").css("z-index", 10);
});

.active		{z-index: 10;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="imageSlider">
	<div class="images">
		<img src="JLT1.jpg" class="active" height="500px" width="700px">
		<img src="JLT2.jpg" height="500px" width="700px">
		<img src="JLT3.jpg" height="500px" width="700px">
		<img src="JLT4.jpg" height="500px" width="700px">
	</div>
 </div>

Answer 1

import tkinter as tk from random import randint # --- classes --- class ScrolledFrame(tk.Frame): def __init__(self, parent, vertical=True, horizontal=False): super().__init__(parent) # canvas for inner frame self._canvas = tk.Canvas(self) self._canvas.grid(row=0, column=0, sticky='news') # changed # create right scrollbar and connect to canvas Y self._vertical_bar = tk.Scrollbar(self, orient='vertical', command=self._canvas.yview) if vertical: self._vertical_bar.grid(row=0, column=1, sticky='ns') self._canvas.configure(yscrollcommand=self._vertical_bar.set) # create bottom scrollbar and connect to canvas X self._horizontal_bar = tk.Scrollbar(self, orient='horizontal', command=self._canvas.xview) if horizontal: self._horizontal_bar.grid(row=1, column=0, sticky='we') self._canvas.configure(xscrollcommand=self._horizontal_bar.set) # inner frame for widgets self.inner = tk.Frame(self._canvas, bg='red') self._window = self._canvas.create_window((0, 0), window=self.inner, anchor='nw') # autoresize inner frame self.columnconfigure(0, weight=1) # changed self.rowconfigure(0, weight=1) # changed # resize when configure changed self.inner.bind('<Configure>', self.resize) self._canvas.bind('<Configure>', self.frame_width) def frame_width(self, event): # resize inner frame to canvas size canvas_width = event.width self._canvas.itemconfig(self._window, width = canvas_width) def resize(self, event=None): self._canvas.configure(scrollregion=self._canvas.bbox('all')) class Question: def __init__(self, parent, question, answer): self.parent = parent self.question = question self.answer = answer self.create_widgets() def get_input(self): value = self.entry.get() print('value:', value) if value == self.answer: print("Esatto. è " + self.answer) self.label['text'] = "Esatto" def create_widgets(self): self.labelframe = tk.LabelFrame(self.parent, text="Domanda:") self.labelframe.pack(fill="both", expand=True) self.label = tk.Label(self.labelframe, text=self.question) self.label.pack(expand=True, fill='both') self.entry = tk.Entry(self.labelframe) self.entry.pack() self.button = tk.Button(self.labelframe, text="Click", command=self.get_input) self.button.pack() # --- main --- root = tk.Tk() root.title("Quiz") root.geometry("400x300") window = ScrolledFrame(root) window.pack(expand=True, fill='both') for i in range(10): one = randint(1, 10) two = randint(1, 10) Question(window.inner, "Quanto fa {} + {} ?".format(one, two), str(one + two)) root.mainloop()应该放在功能
currentImg = $(".active"); nextImg = currentImg.next(); =＆gt; removeClass(".active")。 removeClass("active")
next（）是个问题。

除z-index外，您可以尝试其他属性 - 不透明度。

jQuery“.on（'click'）”事件只能运行一次。图像滑块

1 个答案: