- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我很好奇这是否可能...
通过搜索,我找到了 this问题在这里,但它似乎与我的困境有点不同。
对于那些不关心查看帖子的人,有人试图通过按下单选按钮(放置在被替换的同一个 div 中)来刷新 div。从答案看来,它似乎是成功的。
我的问题
我正在从事以这种方式设置的元素:
1 day
,则该行下方有一个不可见的 div,不会出现。3 天
,他们只能点击其中的 3 天,然后禁用其他 4 天(这些“天”按钮是复选框)5 天
,您猜对了,他们可以选择 5 天。3 天
,则他们必须取消选择所有日期,然后重新选择它们以强制执行 3 天限制,考虑到他们'已经选择了 5 天
被选中的日期。我想做什么
我试图让我的布局以这种方式工作:
5 天
,照常进行。3 days
,我希望不可见的 div(现在可见,因为 one day
不是选择的选项)刷新自身:我的意思是删除 CSS 样式并取消选中所有复选框。我的代码
$("document").ready(function() {
$('input[name=timing]').on('change', function() {
if ($(this).prop('id') == "one") {
$('#recurrence_time').html('One Time');
$('.day-selections').hide();
} else if ($(this).prop('id') == "thrice") {
$('#recurrence_time').html('3 Times a Week');
$('.day-selections').show();
} else if ($(this).prop('id') == "once") {
$('#recurrence_time').html('Once a Week');
$('.day-selections').hide();
} else if ($(this).prop('id') == "custom") {
$('#recurrence_time').html('Custom');
$('.day-selections').show();
}
});
});
$(":checkbox[name=day]").change(function() {
if ($('input#thrice').is(':checked')) {
var len = 3;
} else if ($('input#custom').is(':checked')) {
var len = 5;
}
if ($(":checkbox[name=day]:checked").length == len) {
$(':checkbox:not(:checked)').prop('disabled', true);
} else {
$(':checkbox:not(:checked)').prop('disabled', false);
}
});
function updateHighlightRadio() {
var selected = this.parentNode.parentNode.getElementsByClassName("selected")[0];
if (selected) selected.className = selected.className.replace(" selected", "");
this.parentNode.className += " selected";
}
window.onload = function() {
var radios = document.querySelectorAll("input[type=radio]");
for (var i = 0; i < radios.length; ++i) {
radios[i].onchange = updateHighlightRadio;
}
}
$("input[type='checkbox']").change(function() {
$(this).closest("label").toggleClass(" selected");
});
.selected {
background-color: #FF8C00;
color: #FFFFFF;
}
.how-often p {
font-weight: bold;
text-align: left;
display: inline;
float: left;
}
/* button label */
.recurrence {
border-radius: 8px;
padding: 1em;
margin: 0.5em;
border-radius: 5px;
background-color: #ffd199;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
width: 115px;
text-align: center;
font-size: 12px;
}
/* remove radio button */
.recurrence input {
visibility: hidden;
position: absolute;
}
/* color change when hovering */
.recurrence:hover {
background-color: #FF8C00;
}
.days {
border-radius: 8px;
padding: 1em;
margin: 0.5em;
border-radius: 5px;
background-color: #ffd199;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
text-align: center;
font-size: 12px;
width: 75px;
}
/* remove radio button */
.days input {
visibility: hidden;
position: absolute;
}
/* color change when hovering */
.days:hover {
background-color: #FF8C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="how-often pricing">
<p>How often?</p>
<label class="recurrence">
<input required id="one" name="timing" type="radio">Once
</label>
<label class="recurrence">
<input id="once" name="timing" type="radio">Once a week
</label>
<label class="recurrence">
<input id="thrice" name="timing" type="radio">3 Times a week
</label>
<label class="recurrence">
<input id="custom" name="timing" type="radio">Custom
</label>
<hr>
</div>
<!--start day selection section-->
<div class="day-selections" style="display: none;">
<p>Which days?</p>
<label class="days">
<input id="mon" name="day" type="checkbox">
Monday
</label>
<label class="days">
<input id="tue" name="day" type="checkbox">
Tuesday
</label>
<label class="days">
<input id="wed" name="day" type="checkbox">
Wednesday
</label>
<label class="days">
<input id="thu" name="day" type="checkbox">
Thursday
</label>
<label class="days">
<input id="fri" name="day" type="checkbox">
Friday
</label>
<hr>
</div>
注意:由于某种原因,在我的代码段中选择按钮后,我无法让按钮保持新颜色...
最佳答案
给你。您需要进行的更改:
按照演示添加类和 ID,而不是使用 javascript,您可以只使用 CSS :checked 选择器并在选择时更改样式。
保持你的标签和输入分开而不是嵌套,这样你就可以使用标签中的 for
属性连接到复选框并使用 CSS display:none 隐藏复选框
.
要在选择另一个单选按钮时取消选中复选框,只需确保从所有复选框中删除选中的属性,如每个 if-else 条件的代码所示 $('input.day') .removeAttr('checked');
,比较每个单选按钮的限制值,如果超过限制,则使用代码并将其返回 false,这样就不能再选择复选框了。
if ($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
$("document").ready(function() {
$(".day-selections").hide();
var limit = 0;
$(':radio').click(function() {
if ($('.notone').is(':checked')) {
$(".day-selections").show();
if ($('#thrice').is(':checked')) {
limit = 3;
$('input.day').removeAttr('checked');
$('input.day').on('change', function(evt) {
if ($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
});
} else if ($('#custom').is(':checked')) {
limit = 5;
$('input.day').removeAttr('checked');
$('input.day').on('change', function(evt) {
if ($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
});
}
} else {
$('input.day').removeAttr('checked');
$(".day-selections").hide();
}
});
});
.selected {
background-color: #FF8C00;
color: #FFFFFF;
}
.how-often p {
font-weight: bold;
text-align: left;
display: inline;
float: left;
}
/* button label */
.recurrence {
border-radius: 8px;
padding: 1em;
margin: 0.5em;
border-radius: 5px;
background-color: #ffd199;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
width: 115px;
text-align: center;
font-size: 12px;
}
/* remove radio button */
.recurrence input {
visibility: hidden;
position: absolute;
}
/* color change when hovering */
.recurrence:hover {
background-color: #FF8C00;
}
.days {
border-radius: 8px;
padding: 1em;
margin: 0.5em;
border-radius: 5px;
background-color: #ffd199;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
text-align: center;
font-size: 12px;
width: 75px;
}
.day:checked+.days {
background-color: #FF8C00;
}
.option {
display: none;
}
.option:checked+.recurrence {
background-color: #FF8C00;
}
/* remove radio button */
.day {
display: none;
}
.days-selection {
display: flex;
}
/* color change when hovering */
.days:hover {
background-color: #FF8C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="how-often pricing">
<p>How often?</p>
<input required id="one" class="option" name="timing" type="radio">
<label class="recurrence" for="one">Once</label>
<input id="once" name="timing" class="option" type="radio">
<label class="recurrence" for="once">Once a week</label>
<input id="thrice" class="notone option" name="timing" type="radio">
<label class="recurrence" for="thrice">3 Times a week</label>
<input id="custom" class="notone option" name="timing" type="radio">
<label class="recurrence" for="custom">Custom</label>
<hr>
</div>
<!--start day selection section-->
<div class="day-selections" style="display: none;">
<input id="mon" class="day" name="day" type="checkbox">
<label class="days" for="mon">Monday
</label>
<input id="tue" class="day" name="day" type="checkbox">
<label class="days" for="tue">Tuesday
</label>
<input id="wed" class="day" name="day" type="checkbox">
<label class="days" for="wed">Wednesday
</label>
<input id="thu" class="day" name="day" type="checkbox">
<label class="days" for="thu">Thursday</label>
<input id="fri" class="day" name="day" type="checkbox">
<label class="days" for="fri">Friday
</label>
<hr>
</div>
关于javascript - 使用 Javascript 刷新静态 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47791085/
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 5 年前。 Improve
在 C# 静态方法中是否有一种方法可以引用定义该方法的类型? 在实例方法中,您可以通过以下方式确定类型: public void Foo() { Type type = this.GetTyp
WPF:静态、动态资源以及资源词典 静态资源与动态资源 我们常常会使用样式或者控件模板放在Window.Resources中,比如这样: 静态资源与动态资源使用如下: <Window
任何人都知道如何在共享/静态函数中动态加载控件?该函数本身位于 mustinherit/abstract 类中。 (这是 VB 中的 ASP.NET 项目)我想做这样的事情: VB: Publ
在我看来,静态/强类型编程语言最宝贵的一点是它有助于重构:如果/当您更改任何 API,那么编译器会告诉您该更改破坏了什么。 我可以想象用运行时/弱类型语言编写代码......但我无法想象没有编译器的帮
正如我的名字所暗示的,我是一名 .NET 开发人员,但我对 Java 的兴趣越来越大,并且我有兴趣学习更多其他语言,因为这有助于我学习更多关于编程的知识。 无论如何,我的问题是:不带参数/不使用状态的
我在java中使用WireMock来 stub POST请求。该请求返回一个存储在我本地的 json 正文文件。 stub 看起来像这样: wireMockServer.stubFor(get(url
Python 是否有类构造函数的机制,即每当首次引用类时(而不是创建该对象的实例时)调用的函数?我知道其他一些语言中也存在这种情况,但我还没有在 Python 中遇到过。 基本上,我想初始化该函数中的
Python 是否有类构造函数的机制,即每当首次引用类时(而不是创建该对象的实例时)调用的函数?我知道其他一些语言中也存在这种情况,但我还没有在 Python 中遇到过。 基本上,我想初始化该函数中的
这个问题已经有答案了: What is the difference between dynamic and static polymorphism in Java? (14 个回答) 已关闭 4 年
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: Static initializer in Java 我想知道这个静态的东西(抱歉,这是我第一次遇到这个)对一个类有
如果c++应用程序是按以下方式组织的 //file1.cpp static Y sgObj = X::getInitObject(0); //declared in file scope //fil
我有一个抽象类(AvergedDataRecord),我需要进一步抽象(DataRecord),这样我就可以将它扩展到原始类和一个新的具体类(SummedDataRecord),并且我在获取某些方法时
我正在尝试制作一个字符串枚举。这是我到目前为止所得到的, private class TypedEnum : IEnumerable { public IEnumerator GetEnume
我选修了一门名为“安全代码”的类(class),在下一个作业中,我们应该对一些 C 文件和 JavaEE Web 项目进行静态/动态分析。 我检查了“源监视器”并在 C 文件上运行它,但是(除非我不知
我有两个类,一个是登录类,一个是用户类。在 loggedIn 类中,我想显示我在用户登录时所做的共享首选项。 loginPrefs = getSharedPreferences("loginprefe
我在同一个 Activity 中有两个静态 fragment ,在“fragmentA”中我有一个自定义列表,当一个项目被点击时必须在“fragmentB”中出现一个细节,细节只在我改变屏幕方向时出现
在 Java 中是未修改方法变量,缺少final,每次都重新初始化限定符 静态方法 实例方法 如果 1. 或 2.(或两者)的答案是 final 限定符允许 Java 执行优化并存储方法变量只有一次?
我有两个类相互交互。第一个是中心的,如下: public class Datenbank { double winkelPanel = 0; double groessePanel = 0; doub
我有一个 mysql 数据库,它连接基于 Web 的 php 应用程序和 FoxPro 应用程序(是的,foxpro)。在之前的“开发人员”被解雇后开始处理这个问题。 无论如何,我熟悉 AES_Enc
我是一名优秀的程序员,十分优秀!