Question

我正在尝试将我们的极简单选按钮变成我们捐赠页面上可爱的切换按钮。 HTML无法修改，因为它的输入包含在div中，然后是标签。我对JS / jQuery一无所知，我想这个任务需要一些。

body {
  padding: 10px;
  font-family: sans-serif;
}

div.donation-levels {
  margin: 3px 0;
}

.donation-level-container {
  display: inline-block;
}

.donation-level-container input {
  visibility: hidden;
}

.donation-level-amount-container {
  text-align: center;
  margin: 5px 2px;
  padding: 0.7em 2em;
  color: #ffffff;
  background-color: #1a92b4;
  border-radius: 5px;
  display: inline-block;
  cursor: pointer;
  font-size: 22px;
}

.donation-level-amount-container:hover {
  background: #e8525f;
  color: #ffffff;
}

.donation-level-label-input-container input:checked~label {
  background: #e8525f;
}

<div class="donation-level-container">
  <div class="form-content">

    <div class="donation-level-input-container form-input">

      <div class="donation-level-label-input-container">
        <input name="level_flexibleexpanded" id="level_flexibleexpanded5942" value="5942" onclick="evalMatchingGift('$35.00');" type="radio">
      </div>

      <label for="level_flexibleexpanded5942" onclick="">


    <div class="donation-level-amount-container">
    $35.00
    </div>

    </label>

    </div>

    <input name="level_flexibleexpandedsubmit" id="level_flexible_5942expandedsubmit" value="true" type="hidden">
  </div>
</div>
<div class="donation-level-container">
  <div class="form-content">

    <div class="donation-level-input-container form-input">

      <div class="donation-level-label-input-container">
        <input name="level_flexibleexpanded" id="level_flexibleexpanded5943" value="5943" onclick="evalMatchingGift('$60.00');" type="radio">
      </div>

      <label for="level_flexibleexpanded5943" onclick="">

    <div class="donation-level-amount-container">
    $60.00
    </div>

    </label>

    </div>

    <input name="level_flexibleexpandedsubmit" id="level_flexible_5943expandedsubmit" value="true" type="hidden">
  </div>
</div>
<div class="donation-level-container">
  <div class="form-content">

    <div class="donation-level-input-container form-input">

      <div class="donation-level-label-input-container">
        <input name="level_flexibleexpanded" id="level_flexibleexpanded5944" value="5944" onclick="evalMatchingGift('$120.00');" type="radio">
      </div>

      <label for="level_flexibleexpanded5944" onclick="">

    <div class="donation-level-amount-container">
    $120.00
    </div>

    </label>


    </div>

    <input name="level_flexibleexpandedsubmit" id="level_flexible_5944expandedsubmit" value="true" type="hidden">
  </div>
</div>

这是我的灵感捐赠页面：https://action.audubon.org/donate/now

唉，他们的标签设置得更好，所以我认为他们能够用纯CSS制作按钮（？）。

我的按钮目前看起来不错，尺寸很好，颜色很好，但点击时它们不会保持珊瑚色！有人可以帮助我吗？

我在这个主题上看到了很多问题，但我似乎无法开展任何工作。

我确定代码中还有其他问题，如果您看到它们，请指出它们！

Answer 1

$(".donation-level-amount-container").on("click", function() {
  $('.donation-level-amount-container').each(function() {
      $(this).removeClass('active');
    });    
  $(this).toggleClass('active');
})

和css

.active {
  background:#e8525f;
  color:#ffffff; 
}

工作小提琴： https://jsfiddle.net/29exoa4k/2/

Answer 2

你想要这样的东西

$(".donation-level-amount-container").on("click", function() {
    $(this).css("background", "red");
})

或切换活动课程

$(".donation-level-amount-container").on("click", function() {
    $(this).toggleClass("active");
})

Answer 3

你需要这个jQuery：

$(function() {
  $(document).on('click','.donation-level-amount-container',function(){
    $('.donation-level-amount-container').removeClass('active');
    $(this).addClass('active');
  });
});

还要更新此CSS：

.donation-level-amount-container:hover, .donation-level-amount-container.active { 
    background:#e8525f;
    color:#ffffff; 
}

以下是更新后的jsfiddle。

Answer 4

你需要这个

$(".donation-level-amount-container").on("click", function() {
    $(".donation-level-amount-container").css("background", "#1a92b4");
    $(this).css("background", "#e8525f");
})

和css！对于背景属性很重要

.donation-level-amount-container:hover { 
    background:#e8525f!important;
    color:#ffffff; 
}

这是您更新的小提琴https://jsfiddle.net/cgz63qhd/3/

Answer 5

实际上，这不能用纯CSS完成，因为你不能使用CSS选择器在DOM中向上遍历。正如前面提到的答案，它可以很容易地用jQuery完成，但它也可以在vanilla javascript中完成。

var donationButtons = document.querySelectorAll('.donation-level-amount-container');
var defaultBg = '#1a92b4';
var activeBg = '#f00';

donationButtons.forEach(function(btn){
    btn.onclick = function(){
        donationButtons.forEach(function(btn){
            // deselect previously selected buttons
            btn.style.background = defaultBg;
        });
        this.style.background = activeBg;
    }
});

我确定这可以更顺畅地完成，但这是我头脑中出现的第一个解决方案。

如何在选择无线电输入时更改按钮颜色，但输入是否在标签前用div包装？

5 个答案: