Question

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

我已经研究了其他方法，但没有取得很大的成功，考虑到页面的工作效果，我尤其困惑-但仅当在页面编辑器（elementor）中以管理员身份查看时才如此。

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类。您已经在click元素上触发了div事件，因此您只需要像下面一样对其进行修改-

$(".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

Answer 2

使用setAttribute：

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

Answer 3

改为使用element.classList.add()。

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

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

3 个答案: