我有使用全局类的单选按钮。我希望能重复使用元素的代码尽可能少...有几种显示单选按钮的方法。单击时带有一个带有信息的标签，一个带有很多文本的标签。
如果有很多文字，我会感到它合并到单选按钮中的问题。
有人知道如何在两种情况下使用代码吗？ 元素应始终位于“垂直对齐”中间。
示例和错误：
var checkbox = $('.js-inputround');
(function($) {
$(document).ready(function() {
checkbox.each(function() {
if ($(this).prop('checked')) {
$(this).parent('.input-round__option').addClass('js-check-svg');
$(this).parent('.js-show-info').addClass('js-show');
}
});
//show small info,toggle active icon
checkbox.change(function() {
if (checkbox.length) {
if (checkbox.is(":checked")) {
roundInputShowElements($(this));
} else {
roundInputHideElements($(this));
}
}
});
});
$(window).on('pageshow', function() {
checkbox.each(function() {
if ($(this).prop('checked')) {
$(this).parent('.input-round__option').addClass('js-check-svg');
$(this).parent('.js-show-info').addClass('js-show');
}
});
});
})(jQuery);
function roundInputShowElements(element) {
element.parent('.js-show-info').addClass('js-show');
element.parent('.input-round__option').addClass('js-check-svg');
}
function roundInputHideElements(element) {
element.parent('.js-show-info').removeClass("js-show");
element.parent('.input-round__option').removeClass('js-check-svg');
}.input-round__container {
min-height: 55px;
}
.input-round__option {
display: block;
vertical-align: middle;
position: relative;
height: 100%;
}
.input-round__input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
display: inline-block;
outline: none;
vertical-align: middle;
margin: 0;
}
.icon {
fill: currentColor;
width: 25px;
height: 25px;
display: inline-block;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.input-round__icon {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
margin: 0;
color: #CB4C40;
}
.js-check-svg .input-round__icon--active {
opacity: 1;
transition: all 0.1s;
}
.icon {
fill: currentColor;
width: 25px;
height: 25px;
display: inline-block;
vertical-align: middle;
user-select: none;
}
.input-round__icon--active {
opacity: 0;
transition: all 0.1s;
}
.input-round__option input {
opacity: 0;
margin: 0;
}
.input-round__text {
display: inline-block;
top: 50%;
position: relative;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
padding-left: 10px;
}
.js-check-svg .input-round__label {
font-weight: 500;
font-size: 16px;
line-height: 20px;
color: #46474a;
transition: all 0.1s;
}
.input-round__option.js-show .input-round__info {
display: block;
opacity: 1;
height: 18px;
}
.input-round__info {
height: 0;
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
display: block;
font-weight: 400;
color: #848e8e;
font-size: 14px;
line-height: 18px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-round__container">
<label class="input-round__option js-show-info js-show js-check-svg" data-qa="label">
<div class="input-round__input">
<svg class="icon icon--biggest input-round__icon" id=":option_no_35" viewBox="0 0 35 35" width="100%"
height="100%"><title id=":option-title">option</title>
<path d="M17.5,35 C7.83501688,35 0,27.1649831 0,17.5 C0,7.83501688 7.83501688,0 17.5,0 C27.1649831,0 35,7.83501688 35,17.5 C35,27.1649831 27.1649831,35 17.5,35 Z M17.5,33.90625 C26.5609217,33.90625 33.90625,26.5609217 33.90625,17.5 C33.90625,8.43907832 26.5609217,1.09375 17.5,1.09375 C8.43907832,1.09375 1.09375,8.43907832 1.09375,17.5 C1.09375,26.5609217 8.43907832,33.90625 17.5,33.90625 Z"
id="path-1"></path>
</svg>
<svg class="icon icon--biggest input-round__icon input-round__icon--active" id=":checkbox-yes_35"
viewBox="0 0 35 35" width="100%" height="100%"><title id=":checkbox-yes-title">checkbox-yes</title>
<path d="M17.5,35 C7.83501688,35 0,27.1649831 0,17.5 C0,7.83501688 7.83501688,0 17.5,0 C27.1649831,0 35,7.83501688 35,17.5 C35,27.1649831 27.1649831,35 17.5,35 Z M17.5,33.90625 C26.5609217,33.90625 33.90625,26.5609217 33.90625,17.5 C33.90625,8.43907832 26.5609217,1.09375 17.5,1.09375 C8.43907832,1.09375 1.09375,8.43907832 1.09375,17.5 C1.09375,26.5609217 8.43907832,33.90625 17.5,33.90625 Z M25.8920268,12.6750186 C26.2749325,13.0132068 26.2749325,13.5666056 25.8938589,13.9031757 L25.1921705,14.5229176 L17.2189383,21.5585261 L16.5282424,22.1717955 C16.3340414,22.3416987 16.0812137,22.4306956 15.826554,22.4306956 C15.5755584,22.4306956 15.3245628,22.3416987 15.1321939,22.1717955 L14.441498,21.5585261 L10.4512177,18.0374856 C10.0646479,17.6960612 10.0646479,17.1458986 10.4512177,16.8044742 C10.6454187,16.634571 10.8982464,16.5488104 11.1492419,16.5488104 C11.4002375,16.5488104 11.6530652,16.634571 11.843602,16.8044742 L15.826554,20.3287509 L24.4959783,12.6750186 C24.6901793,12.5051155 24.9393428,12.4225911 25.1903384,12.4193548 L25.1940026,12.4193548 C25.4449982,12.4193548 25.6996579,12.5051155 25.8920268,12.6750186 Z"
id="path-1"></path>
</svg>
</div>
<input class="js-inputround " type="checkbox" id="one" >
<div class="input-round__text">
<span class="input-round__label ">Label</span>
<span class="input-round__info ">small information</span>
</div>
</label>
</div>
<div class="input-round__container">
<label class="input-round__option " data-qa="label">
<div class="input-round__input">
<svg class="icon icon--biggest input-round__icon" id=":option_no_35" viewBox="0 0 35 35" width="100%"
height="100%"><title id=":option-title">option</title>
<path d="M17.5,35 C7.83501688,35 0,27.1649831 0,17.5 C0,7.83501688 7.83501688,0 17.5,0 C27.1649831,0 35,7.83501688 35,17.5 C35,27.1649831 27.1649831,35 17.5,35 Z M17.5,33.90625 C26.5609217,33.90625 33.90625,26.5609217 33.90625,17.5 C33.90625,8.43907832 26.5609217,1.09375 17.5,1.09375 C8.43907832,1.09375 1.09375,8.43907832 1.09375,17.5 C1.09375,26.5609217 8.43907832,33.90625 17.5,33.90625 Z"
id="path-1"></path>
</svg>
<svg class="icon icon--biggest input-round__icon input-round__icon--active" id=":checkbox-yes_35"
viewBox="0 0 35 35" width="100%" height="100%"><title id=":checkbox-yes-title">checkbox-yes</title>
<path d="M17.5,35 C7.83501688,35 0,27.1649831 0,17.5 C0,7.83501688 7.83501688,0 17.5,0 C27.1649831,0 35,7.83501688 35,17.5 C35,27.1649831 27.1649831,35 17.5,35 Z M17.5,33.90625 C26.5609217,33.90625 33.90625,26.5609217 33.90625,17.5 C33.90625,8.43907832 26.5609217,1.09375 17.5,1.09375 C8.43907832,1.09375 1.09375,8.43907832 1.09375,17.5 C1.09375,26.5609217 8.43907832,33.90625 17.5,33.90625 Z M25.8920268,12.6750186 C26.2749325,13.0132068 26.2749325,13.5666056 25.8938589,13.9031757 L25.1921705,14.5229176 L17.2189383,21.5585261 L16.5282424,22.1717955 C16.3340414,22.3416987 16.0812137,22.4306956 15.826554,22.4306956 C15.5755584,22.4306956 15.3245628,22.3416987 15.1321939,22.1717955 L14.441498,21.5585261 L10.4512177,18.0374856 C10.0646479,17.6960612 10.0646479,17.1458986 10.4512177,16.8044742 C10.6454187,16.634571 10.8982464,16.5488104 11.1492419,16.5488104 C11.4002375,16.5488104 11.6530652,16.634571 11.843602,16.8044742 L15.826554,20.3287509 L24.4959783,12.6750186 C24.6901793,12.5051155 24.9393428,12.4225911 25.1903384,12.4193548 L25.1940026,12.4193548 C25.4449982,12.4193548 25.6996579,12.5051155 25.8920268,12.6750186 Z"
id="path-1"></path>
</svg>
</div>
<input class="js-inputround " type="checkbox" required="" id="two" name="" value="1">
<div class="input-round__text">
<span class="input-round__label label--required">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum</span>
<span class="input-round__info "></span>
</div>
</label>
</div>
答案 0 :(得分：1)
只需添加宽度：calc（100％-40px）;
.input-round__text {
display: inline-block;
top: 50%;
position: relative;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
padding-left: 10px;
width: calc(100% - 40px);
}
var checkbox = $('.js-inputround');
(function($) {
$(document).ready(function() {
checkbox.each(function() {
if ($(this).prop('checked')) {
$(this).parent('.input-round__option').addClass('js-check-svg');
$(this).parent('.js-show-info').addClass('js-show');
}
});
//show small info,toggle active icon
checkbox.change(function() {
if (checkbox.length) {
if (checkbox.is(":checked")) {
roundInputShowElements($(this));
} else {
roundInputHideElements($(this));
}
}
});
});
$(window).on('pageshow', function() {
checkbox.each(function() {
if ($(this).prop('checked')) {
$(this).parent('.input-round__option').addClass('js-check-svg');
$(this).parent('.js-show-info').addClass('js-show');
}
});
});
})(jQuery);
function roundInputShowElements(element) {
element.parent('.js-show-info').addClass('js-show');
element.parent('.input-round__option').addClass('js-check-svg');
}
function roundInputHideElements(element) {
element.parent('.js-show-info').removeClass("js-show");
element.parent('.input-round__option').removeClass('js-check-svg');
}.input-round__container {
height: 55px;
}
.input-round__option {
display: block;
vertical-align: middle;
position: relative;
height: 100%;
}
.input-round__input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
display: inline-block;
outline: none;
vertical-align: middle;
margin: 0;
}
.icon {
fill: currentColor;
width: 25px;
height: 25px;
display: inline-block;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.input-round__icon {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
margin: 0;
color: #CB4C40;
}
.js-check-svg .input-round__icon--active {
opacity: 1;
transition: all 0.1s;
}
.icon {
fill: currentColor;
width: 25px;
height: 25px;
display: inline-block;
vertical-align: middle;
user-select: none;
}
.input-round__icon--active {
opacity: 0;
transition: all 0.1s;
}
.input-round__option input {
opacity: 0;
margin: 0;
}
.input-round__text {
display: inline-block;
top: 50%;
position: relative;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
padding-left: 10px;
width: calc(100% - 40px);
}
.js-check-svg .input-round__label {
font-weight: 500;
font-size: 16px;
line-height: 20px;
color: #46474a;
transition: all 0.1s;
}
.input-round__option.js-show .input-round__info {
display: block;
opacity: 1;
height: 18px;
}
.input-round__info {
height: 0;
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
display: block;
font-weight: 400;
color: #848e8e;
font-size: 14px;
line-height: 18px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-round__container">
<label class="input-round__option js-show-info js-show js-check-svg" data-qa="label">
<div class="input-round__input">
<svg class="icon icon--biggest input-round__icon" id=":option_no_35" viewBox="0 0 35 35" width="100%"
height="100%"><title id=":option-title">option</title>
<path d="M17.5,35 C7.83501688,35 0,27.1649831 0,17.5 C0,7.83501688 7.83501688,0 17.5,0 C27.1649831,0 35,7.83501688 35,17.5 C35,27.1649831 27.1649831,35 17.5,35 Z M17.5,33.90625 C26.5609217,33.90625 33.90625,26.5609217 33.90625,17.5 C33.90625,8.43907832 26.5609217,1.09375 17.5,1.09375 C8.43907832,1.09375 1.09375,8.43907832 1.09375,17.5 C1.09375,26.5609217 8.43907832,33.90625 17.5,33.90625 Z"
id="path-1"></path>
</svg>
<svg class="icon icon--biggest input-round__icon input-round__icon--active" id=":checkbox-yes_35"
viewBox="0 0 35 35" width="100%" height="100%"><title id=":checkbox-yes-title">checkbox-yes</title>
<path d="M17.5,35 C7.83501688,35 0,27.1649831 0,17.5 C0,7.83501688 7.83501688,0 17.5,0 C27.1649831,0 35,7.83501688 35,17.5 C35,27.1649831 27.1649831,35 17.5,35 Z M17.5,33.90625 C26.5609217,33.90625 33.90625,26.5609217 33.90625,17.5 C33.90625,8.43907832 26.5609217,1.09375 17.5,1.09375 C8.43907832,1.09375 1.09375,8.43907832 1.09375,17.5 C1.09375,26.5609217 8.43907832,33.90625 17.5,33.90625 Z M25.8920268,12.6750186 C26.2749325,13.0132068 26.2749325,13.5666056 25.8938589,13.9031757 L25.1921705,14.5229176 L17.2189383,21.5585261 L16.5282424,22.1717955 C16.3340414,22.3416987 16.0812137,22.4306956 15.826554,22.4306956 C15.5755584,22.4306956 15.3245628,22.3416987 15.1321939,22.1717955 L14.441498,21.5585261 L10.4512177,18.0374856 C10.0646479,17.6960612 10.0646479,17.1458986 10.4512177,16.8044742 C10.6454187,16.634571 10.8982464,16.5488104 11.1492419,16.5488104 C11.4002375,16.5488104 11.6530652,16.634571 11.843602,16.8044742 L15.826554,20.3287509 L24.4959783,12.6750186 C24.6901793,12.5051155 24.9393428,12.4225911 25.1903384,12.4193548 L25.1940026,12.4193548 C25.4449982,12.4193548 25.6996579,12.5051155 25.8920268,12.6750186 Z"
id="path-1"></path>
</svg>
</div>
<input class="js-inputround " type="checkbox" id="one" >
<div class="input-round__text">
<span class="input-round__label ">Label</span>
<span class="input-round__info ">small information</span>
</div>
</label>
</div>
<div class="input-round__container">
<label class="input-round__option " data-qa="label">
<div class="input-round__input">
<svg class="icon icon--biggest input-round__icon" id=":option_no_35" viewBox="0 0 35 35" width="100%"
height="100%"><title id=":option-title">option</title>
<path d="M17.5,35 C7.83501688,35 0,27.1649831 0,17.5 C0,7.83501688 7.83501688,0 17.5,0 C27.1649831,0 35,7.83501688 35,17.5 C35,27.1649831 27.1649831,35 17.5,35 Z M17.5,33.90625 C26.5609217,33.90625 33.90625,26.5609217 33.90625,17.5 C33.90625,8.43907832 26.5609217,1.09375 17.5,1.09375 C8.43907832,1.09375 1.09375,8.43907832 1.09375,17.5 C1.09375,26.5609217 8.43907832,33.90625 17.5,33.90625 Z"
id="path-1"></path>
</svg>
<svg class="icon icon--biggest input-round__icon input-round__icon--active" id=":checkbox-yes_35"
viewBox="0 0 35 35" width="100%" height="100%"><title id=":checkbox-yes-title">checkbox-yes</title>
<path d="M17.5,35 C7.83501688,35 0,27.1649831 0,17.5 C0,7.83501688 7.83501688,0 17.5,0 C27.1649831,0 35,7.83501688 35,17.5 C35,27.1649831 27.1649831,35 17.5,35 Z M17.5,33.90625 C26.5609217,33.90625 33.90625,26.5609217 33.90625,17.5 C33.90625,8.43907832 26.5609217,1.09375 17.5,1.09375 C8.43907832,1.09375 1.09375,8.43907832 1.09375,17.5 C1.09375,26.5609217 8.43907832,33.90625 17.5,33.90625 Z M25.8920268,12.6750186 C26.2749325,13.0132068 26.2749325,13.5666056 25.8938589,13.9031757 L25.1921705,14.5229176 L17.2189383,21.5585261 L16.5282424,22.1717955 C16.3340414,22.3416987 16.0812137,22.4306956 15.826554,22.4306956 C15.5755584,22.4306956 15.3245628,22.3416987 15.1321939,22.1717955 L14.441498,21.5585261 L10.4512177,18.0374856 C10.0646479,17.6960612 10.0646479,17.1458986 10.4512177,16.8044742 C10.6454187,16.634571 10.8982464,16.5488104 11.1492419,16.5488104 C11.4002375,16.5488104 11.6530652,16.634571 11.843602,16.8044742 L15.826554,20.3287509 L24.4959783,12.6750186 C24.6901793,12.5051155 24.9393428,12.4225911 25.1903384,12.4193548 L25.1940026,12.4193548 C25.4449982,12.4193548 25.6996579,12.5051155 25.8920268,12.6750186 Z"
id="path-1"></path>
</svg>
</div>
<input class="js-inputround " type="checkbox" required="" id="two" name="" value="1">
<div class="input-round__text">
<span class="input-round__label label--required">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum</span>
<span class="input-round__info "></span>
</div>
</label>
</div>