javascript - 单选按钮作为图像卡

Question

我是使用 CSS 进行样式设置的新手。我正在尝试将图像卡添加为单选按钮。我参考了SO中的多篇文章并使用Codepen。

我尝试了以下方法：

• 将标准无线电输入包装在label

• 在此之内label，就在 之后input type="radio"，现在添加一个简单div的卡片样式

console.log($(".test:checked").val())

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 20%;
  height: 20%;
}

/* IMAGE STYLES */
[type=radio] + card {
  cursor: pointer;
  width: 20%;
  height: 20%;
}

/* CHECKED STYLES */
[type=radio]:checked + card {
  outline: 2px solid #f00;
  width: 20%;
  height: 20%;
}


/* Section */
section {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cards {
    display: flex;
}

.card {
    position: relative;
    width: 17rem;
    height: 17rem;
    margin: .5rem;
    border: 1px solid #EEE;
    border-radius: 1rem;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100%;
    overflow: hidden;
    cursor: pointer;
    transition: background-size .4s;
}

.card:hover {
    background-size: 110%;
}

.card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    opacity: 0;
    background-color: rgba(255, 255, 255, .3);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100%;
    transition: .2s;
}

.card:hover::before {
    opacity: 1;
    filter: blur(5px);
    background-size: 110%;
}

.card .title {
    opacity: 0;
    font-size: 12px;
    padding: 1rem;
    transform: translateY(13.5rem);
    transition: .2s;
}

.card:hover .title {
    opacity: 1;
    transform: translateY(13rem);
}

.card.dark .title {
    color: white
}

.card.loan-business,
.card.loan-business::before {
    background-image: url("https://image.freepik.com/free-vector/bank-loan-small-business-flat-vector-concept_81522-3733.jpg");
}

.card.loan-personal,
.card.loan-personal::before {
    background-image: url("https://www.loanqubes.com/campaign/new-personal/images/banner-vector.png");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
<section>
    <ul class="cards">
            <li class="card loan-business">
                    <label>
                        <input type="radio" name="test" id="test" value="business">
                    </label>
                    <div class="title">
                            <h3>Business Loan</h3>
                    </div>
            </li>
            <li class="card loan-personal">
                    <label>
                        <input type="radio" name="test" id="test" value="personal">
                    </label>
                    <div class="title">
                            <h3>Personal Loan</h3>
                    </div>
            </li>
    </ul>
</section>

感谢您的时间和考虑。

标签： javascripthtmljquerycss

Answer 1

您的代码有效，但无线电输入的命中区域太小，并且与.card元素的大小不匹配。要解决此问题，请将他们的widthandheight在 CSS 中设置为100%.

另请注意，您用于测试的 JS 需要修改以监听change收音机上的事件，而不仅仅是在页面加载时输出。此外，您复制了#test无效 HTML 的相同 id，因为值必须是唯一的。我将它们更改为类来解决这个问题。

$('.test').on('change', e => console.log(e.target.value));

[type=radio] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

[type=radio]+card {
  cursor: pointer;
  width: 20%;
  height: 20%;
}

[type=radio]:checked+card {
  outline: 2px solid #f00;
  width: 20%;
  height: 20%;
}

section {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cards {
  display: flex;
}

.card {
  position: relative;
  width: 17rem;
  height: 17rem;
  margin: .5rem;
  border: 1px solid #EEE;
  border-radius: 1rem;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100%;
  overflow: hidden;
  cursor: pointer;
  transition: background-size .4s;
}

.card:hover {
  background-size: 110%;
}

.card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  opacity: 0;
  background-color: rgba(255, 255, 255, .3);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100%;
  transition: .2s;
}

.card:hover::before {
  opacity: 1;
  filter: blur(5px);
  background-size: 110%;
}

.card .title {
  opacity: 0;
  font-size: 12px;
  padding: 1rem;
  transform: translateY(13.5rem);
  transition: .2s;
}

.card:hover .title {
  opacity: 1;
  transform: translateY(13rem);
}

.card.dark .title {
  color: white
}

.card.loan-business,
.card.loan-business::before {
  background-image: url("https://image.freepik.com/free-vector/bank-loan-small-business-flat-vector-concept_81522-3733.jpg");
}

.card.loan-personal,
.card.loan-personal::before {
  background-image: url("https://www.loanqubes.com/campaign/new-personal/images/banner-vector.png");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<section>
  <ul class="cards">
    <li class="card loan-business">
      <label>
        <input type="radio" name="test" class="test" value="business" />
      </label>
      <div class="title">
        <h3>Business Loan</h3>
      </div>
    </li>
    <li class="card loan-personal">
      <label>
        <input type="radio" name="test" class="test" value="personal" />
      </label>
      <div class="title">
        <h3>Personal Loan</h3>
      </div>
    </li>
  </ul>
</section>