问题:
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");
}
