Change background color of selected div onclick not working?

问题: I'm trying to make a form's selected element change its background color upon click. When the page initially loads the first option is selected. I'm trying to figure out wh...

问题:

I'm trying to make a form's selected element change its background color upon click. When the page initially loads the first option is selected. I'm trying to figure out what is wrong with the code I have, because it loads CORRECT when its viewed in our page editor (we're using wordpress & elementor to build our pages and running this as custom html code), but doesn't not load correctly on a "live" page.

I've researched for other methods of doing this without much success, and am especially confused considering the page works - but only when viewed as an admin inside a page editor (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";
}

Above is the code I'm attempting to use to do the highlighting. I've pasted the entirety of what we've got so far into jsfiddle at the link above.


回答1:

You don't need to add another function to add or remove highlight class. You already trigger click event on your div element so you have to just modify it like below -

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


回答2:

Use 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");
}

回答3:

Use element.classList.add() instead.

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");
}
  • 发表于 2019-03-26 05:54
  • 阅读 ( 179 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除