我正在尝试使用 Bootstrap Toggle，但我不知道如何检查用户何时打开或关闭它以便使用 ajax 发送它。
我怎样才能做到这一点 ？
<div class="checkbox">
<label data-label-id="<?= $data->id; ?>" id="message_status">
<input id="check_toogle" type="checkbox" data-toggle="toggle">
</label>
<div class="delete_message">
❌
</div>
</div>
我见过类似的问题，例如“如何在纯 JavaScript 中切换元素的类？ ”，但这个问题指的是属性。
我有一个像这样的复选框：
<span class="newsletter-checkbox">
<input type="checkbox" name="newsletter" id="newsletter" checked> Sign up to the newsletter as well - recieve new posts in your inbox
</span>如何做到这样，当.newsletter-checkbox单击其中的任何位置（包括文本）时，它会切换复选框checked属性？
我们正在使用 Unity（对我们来说是一个新环境）以及 C#（对我们来说是一种新语言）开展一个学校项目。
我们在编写切换按钮（Unity UI 的一部分）脚本时遇到问题。本质上，我们想要检查是否单击了切换按钮，然后激活路径对象以使它们变得可见。
我们正在使用Toggle.interactable切换按钮的脚本。我们知道，SetActive(true)如果单击切换按钮，则必须使用它来激活路径，但我们不确定应该使用什么来检查是否是这样。
出于可用性目的，我想增加 Toggle 的目标大小。使用 .frame(width: 200, height: 200) 按钮很容易。但我不知道如何将其应用于切换。
这是我的代码。我已经标记了它在哪里有效，在哪里无效。
import SwiftUI
struct ContentView: View {
@State private var test = true
var body: some View {
VStack {
Text("Hello, world!")
.padding()
Button(action: {
print("button pressed")
}) {
Image(systemName: "checkmark.circle.fill")
.font(.largeTitle)
// This works for Button
.frame(width: 200, height: 200)
}
Toggle(isOn: Binding<Bool>(
get: { test },
set: {
test = $0
})) {
Text("Done")
}
// This doesn't work for Toggle
.frame(width: 200, height: 200)
.labelsHidden()
}
}
}
struct …我希望我能清楚地解释我的问题。
我想通过切换从列表中选择一些课程，但无论我尝试过什么，它都不起作用。
我应该做些什么？
感谢您的时间。最好的，穆拉特
struct SubjectCardsView: View {
// MARK: - Properties
@State var courses: [Course] = Bundle.main.decode("courses.json")
@State private var toggle: Bool = false
// MARK: - Body
var body: some View {
NavigationView {
List {
ForEach(courses) { course in
Section(header: Text(course.title).font(.system(size: 15, weight: .medium, design: .rounded)).foregroundColor(.blue)) {
ForEach(course.courseName, id: \.name) { item in
Toggle(isOn: $toggle, label: {
Text(item.name)
})
}
}
}
}
.listStyle(InsetGroupedListStyle())
.navigationBarTitle("Choose your subject", displayMode: .inline).font(.system(size: 16, weight: .medium, design: .rounded))
.navigationBarItems(leading: Button(action: { …我需要 x-on:mouseenter="itemActive = {{ index }}"和x-on:mouseleave="itemActive = false"状态x-on:click="itemActive = {{ index }}"在x-on:click.away="itemActive = false"屏幕上小于 768px。下面的代码与较大屏幕的悬停部分完美配合，但似乎无法弄清楚如何使其适用于不同的屏幕尺寸。
我正在使用 Twig、Tailwind 和 Alpine.JS。
<div x-data="{itemActive: false}" class="w-full pb-12 mt-5 overflow-x-hidden overflow-y-scroll md:flex md:flex-wrap md:w-auto md:mt-0 md:pb-0 md:overflow-visible">
{% for item in menu.items %} {% set index = loop.index0 %}
<div x-on:mouseenter="itemActive = {{ index }}" x-on:mouseleave="itemActive = false" class="flex flex-wrap w-full md:block md:w-auto {{ item.classes|join(' ') }}">
<a :class="{'bg-gray-900' : itemActive === {{ index }}}" class="flex flex-wrap …$('textarea').focus(function() {
var img = $(this).css('background-image');
$(this).css('background-image', 'none');
});
$('textarea').blur(function() {
$(this).css('background-image', img);
});
..似乎没有用.我觉得有些不对劲,但我无法弄清楚是什么.
非常感谢您的帮助!
要切换hide/show,我使用了这段代码;
togglebtn.click(function() {
var that = this;
$('.togglecontainer').toggle(500, function(){
var txt = $(that).html();
$(that).html((txt == 'Show less') ? 'Show more' : 'Show less');
});
});
togglebtn.trigger("click");
但它在一个按钮内切换文本.我想要两个按钮,两个不同的img src让我们说images/show.png和images/hide.png
提前致谢
首先,我在html中编写一个下拉菜单:
<div class="top-menu-contain">
<div class="pull-button" ><a href="#">Show Me</a></div>
<div class="pull-button"style="display: none;"><a href="#">Hide Me</a></div>
</div>
在默认状态下,浏览器顶部的顶部菜单带有"fixed"css属性,并设置"top:-100px;",只显示拉按钮.然后我编写jquery代码来实现一个效果,使得菜单滑下:
$('.pull-button a').toggle(function () {
$('.top-menu-contain').animate({ top: '+=100px' }, 'slow');
}, function () {
$('.top-menu-contain').animate({ top: '-=100px' }, 'slow');
实际上这项工作很好,然后我添加一个功能,当菜单向下滑动时,按钮可以从"显示我"改为"隐藏我",然后我添加这个jquery代码: $("div.pull-button") .toggle(); 所以总的jquery代码是:
$('.pull-button a').toggle(function () {
$('.top-menu-contain').animate({ top: '+=100px' }, 'slow');
$("div.pull-button").toggle();
}, function () {
$('.top-menu-contain').animate({ top: '-=100px' }, 'slow');
$("div.pull-button").toggle();
});
但是它现在不起作用,按钮可以改变,它会滑下两次,然后向上滑动两次
那么我的jquery代码有什么问题？我怎样才能以正确的方式实现呢？谢谢!
我正在使用JS通过打开和关闭它们来动画两个图像.我有一个初始图像,当动画打开时,它出现在屏幕上并保持打开状态.然后将具有较高z值的第二图像设置为在与第一图像相同的位置中每1秒打开和关闭,因此看起来两者是交替的.
我正在使用window.setInterval使第二个图像闪烁,但是当我需要关闭动画时(我从屏幕上删除两个图像),我的window.clearInterval不是"正常工作"第一个图像将是走了,但第二个每秒都在眨眼.
码:
function notebookNotification(setting)
{
$("#lightNotificationContainer").show();
var notificationAnimation = window.setInterval('$("#darkNotificationContainer").toggle()', 1000);
if(setting == 0)
{
window.clearInterval(notificationAnimation);
$("#lightNotificationContainer").hide();
$("#darkNotificationContainer").hide();
}
}
任何人都明白为什么它不起作用？