公认的答案是好的。只想添加一些实现相同结果的变体/备选方案,使用更少的代码和更直接的方法:
selected
类的父级
.addressRadio
:checked
单选按钮的状态。
$('.addressRadio').change(function() {
$(this)
.closest('label.fullWidth')
.toggleClass('selected', this.checked);
$('.addressRadio')
.not(this)
.closest('label.fullWidth.selected')
.removeClass('selected');
});
.toggleClassUnique()
在下面的演示代码中)。可能不是特别有用,除非您需要在整个应用程序中使用可重用的功能,但无论如何,这里是:
$('.addressRadio').change(function() {
$(this)
.closest('label.fullWidth')
.toggleClassUnique('selected', this.checked);
});
.selectedAddressButton
和
.deliverButton
)是隐藏还是展示。
.fullWidth .selectedAddressButton {
display: none;
}
.fullWidth.selected .selectedAddressButton {
display: block;
}
.fullWidth.selected .deliverButton {
display: none;
}
这也设置了
.selectedaddress按钮
被“隐藏”,或技术上
display: none
最后但并非最不重要的是,看看
jQuery.noConflict()
对于jQuery别名问题的潜在解决方案。
$.noConflict()
. 在jQuery初始化期间保存$的旧引用;
noConflict()
或者只需在函数范围内传入对全局jQuery对象的引用:
(function ($) {
$(function() {
// More code using $ as alias to jQuery
});
})(jQuery);
您通常会将它添加到JS文件的最上面,然后需要jQuery的所有代码都应该放在这个包装器中。
全工作演示
(function($) {
$('.addressRadio').change(function() {
$(this)
.closest('label.fullWidth')
.toggleClass('selected', this.checked);
$('.addressRadio')
.not(this)
.closest('label.fullWidth.selected')
.removeClass('selected');
});
})(window.jQuery);
.fullWidth .selectedAddressButton {
display: none;
}
.fullWidth.selected .selectedAddressButton {
display: block;
}
.fullWidth.selected .deliverButton {
display: none;
}
label.fullWidth {
width: 100%;
font-size: 1rem;
}
.card-input-element+.card {
/*height: calc(36px + 2*1rem);*/
color: #005499;
-webkit-box-shadow: none;
box-shadow: none;
border: 2px solid transparent;
border-radius: 4px;
border: 2px solid #ccc;
}
.card-input-element+.card:hover {
cursor: pointer;
background-color: #eee;
border: 2px solid #005499;
}
.card-input-element:checked+.card {
border: 2px solid #c3e6cb;
background-color: #d4edda;
-webkit-transition: border .3s;
-o-transition: border .3s;
transition: border .3s;
content: '\f00c';
color: #0e6d2e;
font-family: 'FontAwesome';
font-size: 24px;
-webkit-animation-name: fadeInCheckbox;
animation-name: fadeInCheckbox;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.card-input-element:checked+.card::after {
content: '\f00c';
color: #0e6d2e;
font-family: 'FontAwesome';
font-size: 24px;
-webkit-animation-name: fadeInCheckbox;
animation-name: fadeInCheckbox;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
position: absolute;
top: 0;
right: 5px;
}
@-webkit-keyframes fadeInCheckbox {
from {
opacity: 0;
-webkit-transform: rotateZ(-20deg);
}
to {
opacity: 1;
-webkit-transform: rotateZ(0deg);
}
}
@keyframes fadeInCheckbox {
from {
opacity: 0;
transform: rotateZ(-20deg);
}
to {
opacity: 1;
transform: rotateZ(0deg);
}
}
.addressField {
font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
margin-bottom: 5px;
}
.radioCard {
padding: 20px;
margin: 6px 0;
position: relative;
}
.radioCard:hover {
background-color: #eee;
cursor: pointer;
}
/* note: the position relative goes with the position absolute on the ::after to get the checkmark in the top-right of the div */
/* hiding actual radio button away from screen */
input[type="checkbox"].hideOffScreen,
input[type="radio"].hideOffScreen {
position: absolute;
margin-left: -9999px;
}
.btn-success-custom {
font-family: "ProximaNova", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 14px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
background-color: #28a745;
color: #fff;
border-radius: 3px;
padding-top: 9px;
min-height: 38px;
transition: background 0.5s ease 0s;
-webkit-transition: background 0.5s ease 0s;
-moz-transition: background 0.5s ease 0s;
-ms-transition: background 0.5s ease 0s;
}
.btn-success-custom:hover,
.btn-success-custom:focus,
.btn-success-custom:active,
.btn-success-custom.active,
.open .dropdown-toggle.btn-success-custom {
background-color: #218838;
color: #fff;
}
.btn-success-custom:active,
.open .dropdown-toggle.btn-success-custom {
background-image: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<div>Is the address you'd like to use displayed below? If so, select the corresponding box below. Or, you can <a>enter a different address</a>.</div>
<div class="radioPanel">
<label class="fullWidth">
<input type="radio" name="selectAddress" class="card-input-element d-none hideOffScreen addressRadio" id="address1" value="address1">
<div class="card card-body bg-light d-flex flex-row justify-content-between align-items-center radioCard">
<div class="addressField">John Doe</div>
<div class="addressField">123 Anytown St.</div>
<div class="addressField">Springfield, MD 22365</div>
<div class="row">
<div class="col-md-12 text-left">
<div class="deliverButton" style="margin-top:12px;">
<div type="button" class="btn btn-primary-custom" style="margin-right:10px;">Deliver to this Address</div>
</div>
<div class="selectedAddressButton" style="margin-top:12px;">
<div style="margin-top:12px;">
<div type="button" class="btn btn-success-custom" style="margin-right:10px;"><i class="fa fa-check" aria-hidden="true" style="padding-right:6px;"></i>Selected Address</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-left =" style="margin-top:15px;">
<button type="button" class="btn btn-secondary-custom" style="margin-right:10px;">Edit</button>
<button type="button" class="btn btn-secondary-custom">Delete</button>
</div>
</div>
</div>
</label>
<label class="fullWidth" style="margin-top:10px;">
<input type="radio" name="selectAddress" class="card-input-element d-none hideOffScreen addressRadio" id="address2" value="address2">
<div class="card card-body bg-light d-flex flex-row justify-content-between align-items-center radioCard">
<div class="addressField">Sally Smith</div>
<div class="addressField">555 Elm St.</div>
<div class="addressField">Nantucket, CA 55698</div>
<div class="row">
<div class="col-md-12 text-left">
<div class="deliverButton" style="margin-top:12px;">
<div type="button" class="btn btn-primary-custom" style="margin-right:10px;">Deliver to this Address</div>
</div>
<div class="selectedAddressButton" style="margin-top:12px;">
<div style="margin-top:12px;">
<div type="button" class="btn btn-success-custom" style="margin-right:10px;"><i class="fa fa-check" aria-hidden="true" style="padding-right:6px;"></i>Selected Address</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-left =" style="margin-top:15px;">
<button type="button" class="btn btn-secondary-custom" style="margin-right:10px;">Edit</button>
<button type="button" class="btn btn-secondary-custom">Delete</button>
</div>
</div>
</div>
</label>
</div>
<!-- /.radioPanel -->
</div>
</div>
(function($) {
$('.addressRadio').change(function() {
$(this)
.closest('label.fullWidth')
.toggleClassUnique('selected', this.checked);
});
// Custom plugin
$.fn.toggleClassUnique = function (className, state) {
this
.toggleClass(className, state)
.siblings()
.removeClass(className);
return this;
};
})(window.jQuery);
显示:无;
.fullWidth.selected.selectedaddress按钮{
显示:块;
.fullWidth.selected.deliverButton按钮{
显示:无;
}
宽度:100%;
字体大小:1rem;
.卡输入元素+卡{
/*高度:计算(36px+2*1rem)*/
颜色:#005499;
-webkit框阴影:无;
边框:2倍纯色透明;
边界半径:4px;
}
光标:指针;
边框:2px实心#005499;
}
边框:2px实心#c3e6cb;
背景色:#d4edda;
-webkit转换:border.3s;
过渡:边界。3s;
内容:'\f00c';
颜色:#0e6d2e;
字号:24px;
-webkit动画名称:fadeInCheckbox;
动画名称:fadeInCheckbox;
动画持续时间:.5s;
-webkit动画计时功能:立方贝塞尔(0.4,0,0.2,1);
动画计时功能:立方贝塞尔(0.4,0,0.2,1);
.card输入元素:checked+.card::after{
内容:'\f00c';
颜色:#0e6d2e;
字号:24px;
动画名称:fadeInCheckbox;
-webkit动画持续时间:.5s;
-webkit动画计时功能:立方贝塞尔(0.4,0,0.2,1);
位置:绝对;
顶部:0;
右:5倍;
@-webkit关键帧淡入检查框{
从{
}
不透明度:1;
-webkit变换:rotateZ(0度);
@关键帧淡入检查框{
从{
变换:rotateZ(-20度);
}
到{
不透明度:1;
变换:rotateZ(0度);
}
}
字号:18px;
下边距:5倍;
.无线网卡{
衬垫:20px;
位置:相对;
}
.无线网卡:悬停{
光标:指针;
}
/*注意:相对位置与::after上的绝对位置一致,以获得div右上角的复选标记*/
输入[type=“checkbox”].hideOffScreen,
输入[type=“radio”].hideOffScreen{
位置:绝对;
左边距:-9999px;
.btn成功自定义{
字体家族:“近邻”,“HelviTIC-NEUE”,HelviTi,Arial,无衬线;
字号:14px;
文本对齐:居中;
文本转换:大写;
背景色:#28a745;
边界半径:3px;
上垫:9px;
过渡:背景0.5s缓解0s;
-webkit转换:后台0.5s轻松0s;
-moz转换:背景0.5s缓解0s;
-ms转换:背景0.5s缓解0s;
.btn成功自定义:悬停,
.btn成功自定义:焦点,
.btn成功自定义:活动,
.open.dropdown-toggle.btn-success-custom命令{
背景色:#218838;
}
.btn成功自定义:活动,
.open.dropdown-toggle.btn-success-custom命令{
背景图像:无;
}
<link href=“https://maxcdn.bootstrapcdn.com/font-Aweome/4.7.0/css/font-Aweome.min.css”rel=“样式表“/>
<link ref=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”rel=“样式表”/>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery ui/1.12.1/jquery ui.js”></script>
<div class=“row”>
<div class=“col-md-12”>
<div>您要使用的地址是否显示在下面?如果是,请选择下面相应的框。或者,您可以<a>输入其他地址</a></div>
<div class=“radioPanel”>
<label class=“fullWidth”>
<input type=“radio”name=“selectAddress”class=“card input element d-none hideOffScreen addressRadio”id=“address1”value=“address1”>
<div class=“addressField”>约翰·多伊</div>
<div class=“addressField”>123 Anytown街</div>
<div class=“addressField”>马里兰州斯普林菲尔德,邮编22365</div>
<div class=“row”>
<div class=“deliverButton”style=“margin top:12px;”lt;div class=“deliverButton”style=“margin top:12px;”lt;gt;
</分区>
<div class=“selectedAddressButton”style=“margin-top:12px;”lt;div class=“selectedAddressButton”style=“margin-top:12px;”gt;
<div type=“button”class=“btn btn success custom”style=“margin right:10px;”gt;<i class=“fa fa check”aria hidden=“true”style=“padding right:6px;”gt;</i>选定地址</div>
</分区>
</分区>
<div class=“row”>
<
<button type=“button”class=“btn btn secondary custom”style=“margin right:10px;”>编辑</按钮>
</分区>
</分区>
</分区>
<label class=“fullWidth”style=“margin top:10px;”lt;label class=“fullWidth”style=“margin top:10px;”gt;
<input type=“radio”name=“selectAddress”class=“card input element d-none hideOffScreen addressRadio”id=“address2”value=“address2”>
<div class=“card card body bg light d-flex flex row justify content between align items center无线网卡”>
<div class=“addressField”>莎莉·史密斯</div>
<div class=“addressField”>555榆树街</div>
<div class=“row”>
<div class=“deliverButton”style=“margin top:12px;”lt;div class=“deliverButton”style=“margin top:12px;”lt;gt;
<div type=“button”class=“btn btn primary custom”style=“margin right:10px;”>发送到此地址<div>
</分区>
<div class=“selectedAddressButton”style=“margin-top:12px;”lt;div class=“selectedAddressButton”style=“margin-top:12px;”gt;
<div style=“margin top:12px;”gt;
<div type=“button”class=“btn btn success custom”style=“margin right:10px;”gt;<i class=“fa fa check”aria hidden=“true”style=“padding right:6px;”gt;</i>选定地址</div>
</分区>
</分区>
</分区>
<div class=“row”>
<
<button type=“button”class=“btn btn secondary custom”style=“margin right:10px;”>编辑</按钮>
<button type=“button”class=“btn btn secondary custom”>删除</按钮>
</分区>
</分区>
</标签>
</分区>
</分区>
P、 如果你有兴趣创造你自己的,请看
how to create a basic plugin
.
•
1 楼
