javascript - 更改所选 div onclick 的背景颜色不起作用？

Question

我正在尝试使表单的选定元素在单击时更改其背景颜色。当页面最初加载时，第一个选项被选中。我试图弄清楚我的代码有什么问题，因为它在我们的页面编辑器中查看时加载正确(我们使用 wordpress 和 elementor 构建我们的页面并将其作为自定义 html 代码运行)，但没有无法在“实时”页面上正确加载。

我已经研究了其他方法来做到这一点，但没有取得太大成功，考虑到该页面的工作情况，我感到特别困惑——但仅当在页面编辑器(元素)中以管理员身份查看时。

https://jsfiddle.net/ncLk85mb/

function toggleClass(el) {
    var kids = document.getElementById('menu1').children;
    for (var i = 0; i < kids.length; i++) {
        kids[i].className = "item";
    }
    el.className = "item highlight";
}

上面是我试图用来做突出显示的代码。我已将到目前为止的全部内容粘贴到上面链接中的 jsfiddle 中。

Answer 1

您不需要添加其他功能来添加或删除 highlight 类。您已经在 div 元素上触发了 click 事件，因此您只需像下面那样修改它 -

$(".item").on('click', function() {
  $('.item').removeClass('highlight');
  $(this).addClass('highlight');
  var item = $(this).find('input');
  item.trigger("click");
  if (item.prop("checked")) {
    item.prop('checked', true);
  } else {
    item.prop('checked', false);
  }

});

$("input:checkbox").on('click', function() {
  var $box = $(this);
  if ($box.is(":checked")) {
    var group = "input:checkbox[name='" + $box.attr("name") + "']";
    $(group).prop("checked", false);
    $box.prop("checked", true);
  } else {
    $box.prop("checked", false);
  }
});

$("input[name=submit]").on('click', function() {
  var redirect = $('input[name="product"]:checked').val();
  window.location.href = redirect;
});

/*Funnel Template - Step 2 - Order Form */

.main-panel {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 20px;
  margin-top: 20px;
  min-height: 320px;
  width: 100%;
}

.main-panel h2 {
  font-size: 26px;
  text-align: left;
  margin: 0;
  font-weight: bold;
}

.main-panel .item {
  margin: 15.4px 0;
  padding: 8px 0;
  min-height: 60px;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.main-panel .item p {
  margin: 0;
}

.main-panel .selection {
  float: left;
  width: 10%;
}

.main-panel .left-section {
  float: left;
  width: 46%;
}

.main-panel .right-section {
  float: right;
  width: 37%;
  margin-left: 5%;
  text-align: right;
}

.main-panel .item.highlight {
  background-color: #ffc500;
  z-index: 0;
  border-radius: 5px;
}

.main-panel .item input[type='checkbox'] {
  opacity: 0;
  z-index: 2;
  width: 18px;
  height: 18px;
  margin: 0;
}

.main-panel .item span::after {
  opacity: 1;
  z-index: 1;
  content: "";
  display: inline-block;
  position: absolute;
  width: 18px;
  height: 18px;
  left: 10px;
  border: 2px solid #172969;
  border-radius: 50%;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  line-height: 1.1em;
}

input[type="checkbox"]:checked+span:after {
  font-family: 'FontAwesome';
  content: "\f00c";
  background-color: #172969;
  color: #fff;
}

input[type=button] {
  font-size: 18px;
  font-weight: 600;
  font-family: Noto Sans, sans-serif;
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  text-transform: uppercase;
  width: 100%;
  border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-panel">
  <form>
    <h2 style="text-align:center;">CHOOSE YOUR PACKAGE!</h2>
    <div id="menu1">
      <div class="item highlight">
        <div class="selection"><input type="checkbox" class="styled" name="product" value="#link1" checked="checked" /><span></span> </div>
        <div class="left-section">
          Option 1 A
        </div>
        <div class="right-section">
          Option 1 B
        </div>
      </div>
      <div class="item">
        <div class="selection"> <input type="checkbox" name="product" value="link#2" /><span></span> </div>
        <div class="left-section">
          Option 1 A
        </div>
        <div class="right-section">
          Option 1 B
        </div>
      </div>
      <div class="item">
        <div class="selection"> <input type="checkbox" name="product" value="#link3" /><span></span> </div>
        <div class="left-section">
          Option 1 A
        </div>
        <div class="right-section">
          Option 1 B
        </div>
      </div>
      <div class="item">
        <div class="selection"> <input type="checkbox" name="product" value="#link4" /><span></span> </div>
        <div class="left-section">
          Option 1 A
        </div>
        <div class="right-section">
          Option 1 B
        </div>
      </div>
    </div>
    <input type="button" name="submit" value="Click Now!" />
  </form>
</div>

JSFiddle Link