jquery - 带有单选按钮和 JS 的 CSS 过渡

Question

使用我的 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>

Answer 1

使用 :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>

---

顺便说一下，我没有看到这个return 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);
});

.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: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);
}

<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>