使用Radio Button和JS进行CSS转换
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用Radio Button和JS进行CSS转换相关的知识,希望对你有一定的参考价值。
使用我的jQuery代码,我能够从.item获取属性,但我的css转换不起作用。您可以通过将.item
替换为.item-tile
来查看预期的转换。
如何让我的CSS过渡到我的jQuery
代码?
$(".item-wrap").on("click", ".item", function() {
var itemColor = $(this)
.find(".icon")
.css("background-color");
$(".category-color").css("background-color", itemColor);
return false;
});
.item-wrap {
display: flex;
}
.icon {
margin: 0px 5px 0px 5px;
position: relative;
height: 35px;
width: 35px;
border-radius: 50%;
}
.item-wrap .item {
position: relative;
}
.item-wrap .item .radio-button {
opacity: 0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
z-index: 999;
cursor: pointer;
}
.item-wrap .item .item-tile {
-webkit-transition: -webkit-transform 300ms ease;
transition: -webkit-transform 300ms ease;
-o-transition: transform 300ms ease;
transition: transform 300ms ease;
transition: transform 300ms ease, -webkit-transform 300ms ease;
}
.item-wrap .item .radio-button:checked+.item-tile {
border: 2px solid #079ad9;
-webkit-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.category-color {
height: 50px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item-wrap">
<div class="item">
<input id="clothing" class="radio-button" type="radio" name="radio" />
<div class="item-tile">
<div class="icon" style="background-color:blue;">
</div>
</div>
</div>
<div class="item">
<input id="elephant" class="radio-button" type="radio" name="radio" />
<div class="item-tile">
<div class="icon" style="background-color:red;">
</div>
</div>
<div class="item">
<input id="fish" class="radio-button" type="radio" name="radio" />
<div class="item-tile">
<div class="icon" style="background-color:green;">
</div>
</div>
</div>
</div>
</div>
<div class="copy-container">
<div class="category-color">
</div>
</div>
答案
使用:focus
而不是:checked
。
为什么?
只是因为在您的jQuery代码上,您返回false并阻止无线电输入的默认行为,因此无法检查它。
$(".item-wrap").on("click", ".item", function() {
$("#text-preview").text($(this).find(".item-text").text());
var path = $(this)
.find("#item-path")
.attr("d");
var pathb = $(this)
.find("#item-path")
.attr("d");
var pathc = $(this)
.find("#item-path")
.attr("d");
$("#path-preview").attr("d", path);
$("#path-preview").attr("d", pathb);
$("#path-preview").attr("d", pathc);
var itemColor = $(this)
.find(".icon")
.css("background-color");
$(".category-color").css("background-color", itemColor);
return false;
});
.item-wrap {
display: flex;
}
.item-tile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 15px;
background: white;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 50px;
border-radius: 10px;
-webkit-box-shadow: 3px 4px 3px -1px rgba(245, 245, 245, 1);
box-shadow: 3px 4px 3px -1px rgba(245, 245, 245, 1);
}
.item-tile label {
flex: 0;
padding: 0px 5px 0px 5px;
}
.icon {
margin: 0px 5px 0px 5px;
position: relative;
height: 35px;
width: 35px;
border-radius: 50%;
}
.item-wrap .item {
position: relative;
}
.item-wrap .item .radio-button {
opacity: 0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
z-index: 999;
cursor: pointer;
}
.item-wrap .item .item-tile {
-webkit-transition: -webkit-transform 300ms ease;
transition: -webkit-transform 300ms ease;
-o-transition: transform 300ms ease;
transition: transform 300ms ease;
transition: transform 300ms ease, -webkit-transform 300ms ease;
}
.item-wrap .item .icon svg {
width: 3rem;
height: 3rem;
}
.item-wrap .item .radio-button:focus+.item-tile {
border: 2px solid #079ad9;
-webkit-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item-wrap">
<div class="item">
<input id="clothing" class="radio-button" type="radio" name="radio" />
<div class="item-tile">
<div class="icon" style="background-color:blue;">
<svg xmlns="http://www.w3.org/2000/svg" height="30" viewBox="0 0 35 35" preserveAspectRatio="xMinYMax meet">
<g fill="#fff" stroke="#fff">
<path id="item-path" d="M21.435 15.78c-2.34-1.886-5.302-2.878-8.303-3.002v-1.022c1.036-.28 1.8-1.227 1.8-2.35 0-1.342-1.09-2.433-2.432-2.433-1.342 0-2.434 1.09-2.434 2.433 0 .35.284.632.632.632.35 0 .632-.283.632-.632 0-.645.525-1.17 1.17-1.17.645 0 1.17.525 1.17 1.17 0 .645-.525 1.17-1.17 1.17-.348 0-.632.282-.632.63v1.572c-3 .124-5.962 1.116-8.303 3-.543.44-.63 1.234-.19 1.778.436.543 1.232.63 1.775.19 4.053-3.262 10.647-3.262 14.7 0 .233.19.513.28.79.28.37 0 .737-.16.986-.47.438-.544.352-1.34-.19-1.777z"/>
</g>
</svg>
</div>
<label for="clothing" class="item-tile-label"><text class="item-text">Clothing</text></label>
</div>
</div>
<div class="item">
<input id="elephant" class="radio-button" type="radio" name="radio" />
<div class="item-tile">
<div class="icon" style="background-color:red;">
<svg xmlns="http://www.w3.org/2000/svg" height="35" viewBox="0 0 35 35" preserveAspectRatio="xMinYMax meet">
<g fill="#fff" stroke="#fff">
<path id="item-path" d="M19.565 9.34H15.48c-.146 1.18-.736 2.262-1.67 3.028-.09.072-.196.108-.303.108-.138 0-.276-.06-.37-.175-.168-.203-.138-.505.066-.673.86-.705 1.354-1.747 1.354-2.858 0-2.04-1.657-3.696-3.695-3.696-1.906 0-3.48 1.45-3.674 3.306-.236.137-.456.3-.654.488-.073.07-.14.14-.206.214-.826.936-1.008 2.16-1.008 3.053 0 .382.01.765.02 1.135.03 1.11.066 2.493-.3 2.87-.03.03-.115.117-.422.117-.53 0-.957.43-.957.957 0 .53.43.957.958.957.74 0 1.343-.233 1.793-.695.602-.617.796-1.505.847-2.513.113.003.234.005.36.005.955 0 2.245-.115 3.266-.627 0 0-.07.442-.07.568v3.807c0 .68.643 1.21 1.325 1.21h.018c.682 0 1.23-.53 1.23-1.21v-1.958h4.544v1.974c0 .673.565 1.196 1.237 1.196h.018c.672 0 1.197-.523 1.197-1.195v-2.18c.598-.3.957-.9.957-1.587v-3.828c0-.99-.784-1.794-1.775-1.794zM7.19 12.108c0-.25.2-.45.45-.45s.45.2.45.45-.2.45-.45.45-.45-.2-.45-.45z"/>
</g>
</svg>
</div>
<label for="elephant" class="item-tile-label"><text class="item-text">Elephant</text></label>
</div>
</div>
<div class="item">
<input id="fish" class="radio-button" type="radio" name="radio" />
<div class="item-tile">
<div class="icon" style="background-color:green;">
<svg xmlns="http://www.w3.org/2000/svg" height="35" viewBox="0 0 35 35" preserveAspectRatio="xMinYMax meet">
<g fill="#fff" stroke="#fff">
<path id="item-path" d="M13.587 16.6h1.83c-.255 1.303-1.406 2.31-2.773 2.31-1.558 0-2.823-1.278-2.823-2.836v-5.166c.15-.145.25-.365.25-.61V5.883c0-.438-.337-.793-.775-.793s-.776.356-.776.794v4.413c0 .246.1.466.25.61v5.167c0 2.115 1.738 3.835 3.853 3.835 2.09 0 3.82-1.718 3.846-3.832l.01-1.968v-1.574L13.588 16.6z"/>
</g>
</svg>
</div>
<label for="fish" class="item-tile-label"><text class="item-text">Fish</text></label>
</div>
</div>
</div>
</div>
<div class="copy-container">
<div class="copy-svg category-color">
<svg xmlns="http://www.w3.org/2000/svg" height="35" viewBox="0 0 35 35" preserveAspectRatio="xMinYMax meet">
<g fill="#fff" stroke="">
<path id="path-preview" d=""/>
</g>
</svg>
</div>
<text id="text-preview"></text>
</div>
以上是关于使用Radio Button和JS进行CSS转换的主要内容,如果未能解决你的问题,请参考以下文章