jquery - 根据 jquery ui 滑块值隐藏或显示
问题描述
因此,目前我有一个 UI 滑块,它随着值的变化而更改价格表表单上的数据,我似乎无法弄清楚的问题是,如果达到某个值,如何使这些框中的一个或多个变灰。
我附上了一张图片来解释当在滑块上选择 1 个用户时我想要实现的目标,以及如果在 UI 滑块上选择 2-4 个用户我希望它显示什么。任何帮助将不胜感激,我真的在为此苦苦挣扎。
我在 Photoshop 中制作以更好地解释我希望实现的目标,我删除了我尝试使用的代码,因为它不起作用并且不确定我是否以正确的方式进行操作,任何帮助我都会感激不尽,因为我真的把我的头撞到这里的墙上。
当滑块移动时,我需要将以下 div 框变灰
<div class="pricing-item">
<div class="pricing-item-inner">
<div class="pricing-item-content">
<div class="pricing-item-header">
<div class="pricing-item-title">Advanced</div>
<div
class="pricing-item-price"
data-price-output='{
"0": ["$", "13", "/m"],
"1": ["$", "17", "/m"],
"2": ["$", "21", "/m"],
"3": ["$", "25", "/m"],
"4": ["$", "42", "/m"]
}'
>
<span class="pricing-item-price-currency"></span>
<span class="pricing-item-price-amount"></span>
<span class="pricing-item-price-after"></span>
</div>
</div>
<div class="pricing-item-features">
<ul class="pricing-item-features-list">
<li class="is-checked">Excepteur sint occaecat</li>
<li class="is-checked">Excepteur sint occaecat</li>
<li class="is-checked">Excepteur sint occaecat</li>
<li class="is-checked">Excepteur sint occaecat</li>
<li class="is-checked">Excepteur sint occaecat</li>
</ul>
</div>
</div>
<div class="pricing-item-cta">
<a class="button" href="#">Buy Now</a>
</div>
</div>
</div>
这是代码的codepen链接:https ://codepen.io/daniel-smit/pen/ZEQELRa
任何帮助真的将不胜感激。
解决方案
为了使其以您想要的方式工作,您必须在每个标签元素内创建一个覆盖<div>
以及一些其他样式,以将其定位在其父元素内,提供相对位置,以便它将成为覆盖的位置参考。还为这三个中的每一个添加唯一的类 ,我给它们和类,以便我们可以根据滑块输入来引用它们。position:absolute
pricing-item
pricing-item
pricing-item
pricing-item
left
middle
right
<range>
.pricing-item {
flex-basis: 280px;
max-width: 280px;
box-sizing: content-box;
padding: 12px;
position: relative;
}
.overlay {
position: absolute;
left: 12px;
top: 0;
background-color: rgba(0, 0, 0, 0.5);
width: calc(100% - 24px);
height: calc(100% - 12px);
display: none;
z-index: 1;
}
在handlePricingSlider()
函数内部我添加了这段代码:
let val = +input.el.value;
document.querySelectorAll(".pricing-item.overlay").forEach((el) => {
el.style.display = "none";
});
if (val === 0) {
document
.querySelectorAll(
".pricing-item.left .overlay, .pricing-item.right .overlay"
)
.forEach((el) => {
el.style.display = "block";
});
} else if (val === 1) {
document.querySelectorAll(".pricing-item.right .overlay").forEach((el) => {
el.style.display = "block";
});
} else if (val > 1) {
document.querySelectorAll(".pricing-item.right .overlay").forEach((el) => {
el.style.display = "none";
});
}
这段代码所做的是首先重置/删除<div>
所有元素上的覆盖,然后检查<range>
输入值,如果值是0
,它将使左右列变灰,如果1
它将使右列变灰,否则布局将被移除。
这是一个片段:
(function () {
const pricingSliders = document.querySelectorAll(".pricing-slider");
if (pricingSliders.length > 0) {
for (let i = 0; i < pricingSliders.length; i++) {
const pricingSlider = pricingSliders[i];
// Build the input object
const pricingInput = {
el: pricingSlider.querySelector("input"),
};
pricingInput.data = JSON.parse(
pricingInput.el.getAttribute("data-price-input")
);
pricingInput.currentValEl = pricingSlider.querySelector(
".pricing-slider-value"
);
pricingInput.thumbSize = parseInt(
window
.getComputedStyle(pricingInput.currentValEl)
.getPropertyValue("--thumb-size"),
10
);
// Build the output array
const pricingOutputEls = pricingSlider.parentNode.querySelectorAll(
".pricing-item-price"
);
const pricingOutput = [];
for (let i = 0; i < pricingOutputEls.length; i++) {
const pricingOutputEl = pricingOutputEls[i];
const pricingOutputObj = {};
pricingOutputObj.currency = pricingOutputEl.querySelector(
".pricing-item-price-currency"
);
pricingOutputObj.amount = pricingOutputEl.querySelector(
".pricing-item-price-amount"
);
pricingOutputObj.after = pricingOutputEl.querySelector(
".pricing-item-price-after"
);
pricingOutputObj.data = JSON.parse(
pricingOutputEl.getAttribute("data-price-output")
);
pricingOutput.push(pricingOutputObj);
}
pricingInput.el.setAttribute("min", 0);
pricingInput.el.setAttribute(
"max",
Object.keys(pricingInput.data).length - 1
);
!pricingInput.el.getAttribute("value") &&
pricingInput.el.setAttribute("value", 0);
handlePricingSlider(pricingInput, pricingOutput);
window.addEventListener("input", function () {
handlePricingSlider(pricingInput, pricingOutput);
});
}
}
function handlePricingSlider(input, output) {
// output the current slider value
if (input.currentValEl)
input.currentValEl.innerHTML = input.data[input.el.value];
// update prices
for (let i = 0; i < output.length; i++) {
const outputObj = output[i];
if (outputObj.currency)
outputObj.currency.innerHTML = outputObj.data[input.el.value][0];
if (outputObj.amount)
outputObj.amount.innerHTML = outputObj.data[input.el.value][1];
if (outputObj.after)
outputObj.after.innerHTML = outputObj.data[input.el.value][2];
}
handleSliderValuePosition(input);
let val = +input.el.value;
document.querySelectorAll(".pricing-item .overlay").forEach((el) => {
el.style.display = "none";
});
if (val === 0) {
document
.querySelectorAll(
".pricing-item.left .overlay, .pricing-item.right .overlay"
)
.forEach((el) => {
el.style.display = "block";
});
} else if (val === 1) {
document
.querySelectorAll(".pricing-item.right .overlay")
.forEach((el) => {
el.style.display = "block";
});
} else if (val > 1) {
document
.querySelectorAll(".pricing-item.right .overlay")
.forEach((el) => {
el.style.display = "none";
});
}
}
function handleSliderValuePosition(input) {
const multiplier = input.el.value / input.el.max;
const thumbOffset = input.thumbSize * multiplier;
const priceInputOffset =
(input.thumbSize - input.currentValEl.clientWidth) / 2;
input.currentValEl.style.left =
input.el.clientWidth * multiplier - thumbOffset + priceInputOffset + "px";
}
})();
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
font-size: 16px;
line-height: 24px;
letter-spacing: -0.1px;
}
body {
color: #607090;
font-size: 1rem;
margin: 0;
padding: 48px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
body,
button,
input,
select,
textarea {
font-family: "Heebo", sans-serif;
font-weight: 400;
}
.button {
display: flex;
width: 100%;
font-size: 14px;
line-height: 22px;
font-weight: 700;
padding: 12px 29px;
text-decoration: none !important;
text-transform: uppercase;
color: #ffffff;
background-color: #5f48ff;
border-width: 1px;
border-style: solid;
border-color: transparent;
border-radius: 2px;
cursor: pointer;
justify-content: center;
text-align: center;
letter-spacing: inherit;
white-space: nowrap;
transition: background 0.15s ease;
}
input[type="range"] {
-moz-appearance: none;
-webkit-appearance: none;
background: #eef1f6;
border-radius: 3px;
height: 6px;
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
background-color: #5f48ff;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%20.5v7L12%204zM0%204l4%203.5v-7z%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
background-position: center;
background-repeat: no-repeat;
border: 0;
border-radius: 50%;
cursor: pointer;
height: 36px;
width: 36px;
}
input[type="range"]::-moz-range-thumb {
background-color: #5f48ff;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%20.5v7L12%204zM0%204l4%203.5v-7z%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
background-position: center;
background-repeat: no-repeat;
border: 0;
border: none;
border-radius: 50%;
cursor: pointer;
height: 36px;
width: 36px;
}
input[type="range"]::-ms-thumb {
background-color: #5f48ff;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%20.5v7L12%204zM0%204l4%203.5v-7z%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
background-position: center;
background-repeat: no-repeat;
border: 0;
border-radius: 50%;
cursor: pointer;
height: 36px;
width: 36px;
}
input[type="range"]::-moz-focus-outer {
border: 0;
}
.pricing-slider {
max-width: 280px;
margin: 0 auto;
}
.form-slider span {
display: block;
font-weight: 500;
text-align: center;
margin-bottom: 16px;
}
.pricing-slider {
margin-bottom: 48px;
}
.pricing-slider {
max-width: 280px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.pricing-slider input {
width: 100%;
}
.pricing-slider .pricing-slider-value {
position: absolute;
font-size: 14px;
line-height: 22px;
font-weight: 500;
color: #909cb5;
margin-top: 8px;
--thumb-size: 36px;
}
.pricing-items {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-right: -12px;
margin-left: -12px;
margin-top: -12px;
}
.pricing-item {
flex-basis: 280px;
max-width: 280px;
box-sizing: content-box;
padding: 12px;
position: relative;
}
.overlay {
position: absolute;
left: 12px;
top: 0;
background-color: rgba(0, 0, 0, 0.5);
width: calc(100% - 24px);
height: calc(100% - 12px);
display: none;
z-index: 1;
}
.pricing-item-inner {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 100%;
padding: 24px;
box-shadow: 0 8px 16px rgba(46, 52, 88, 0.16);
}
.pricing-item-title {
font-weight: 500;
}
.pricing-item-price {
display: inline-flex;
align-items: baseline;
font-size: 20px;
}
.pricing-item-price-amount {
font-size: 36px;
line-height: 48px;
font-weight: 500;
color: #191e2a;
}
.pricing-item-features-list {
list-style: none;
padding: 0;
}
.pricing-item-features-list li {
margin-bottom: 0;
padding: 14px 0;
position: relative;
display: flex;
align-items: center;
}
.pricing-item-features-list li::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
display: block;
height: 1px;
background: #e9ecf8;
}
.pricing-item-features-list li::after {
content: "";
display: block;
width: 24px;
height: 24px;
margin-right: 12px;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%2011h14v2H5z%22%20fill%3D%22%239298B8%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
-webkit-box-ordinal-group: 0;
order: -1;
}
.pricing-item-features-list li.is-checked::after {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill-rule%3D%22nonzero%22%20fill%3D%22none%22%3E%3Ccircle%20fill%3D%22%2300C2A9%22%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2212%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M10.5%2012.267l-2.5-1.6-1%201.066L10.5%2016%2017%209.067%2016%208z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Pricing Switcher</title>
<link href="https://fonts.googleapis.com/css?family=Heebo:400,500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<style></style>
</head>
<body>
<div class="pricing">
<div class="pricing-slider">
<label class="form-slider">
<span>How many users do you have?</span>
<input
type="range"
value="1"
data-price-input='{
"0": "1",
"1": "2-4",
"2": "5-9",
"3": "10-24",
"4": "25+"
}'
/>
</label>
<div class="pricing-slider-value"></div>
</div>
<div class="pricing-items">
<div class="pricing-item left">
<div class="overlay"></div>
<div class="pricing-item-inner">
<div class="pricing-item-content">
<div class="pricing-item-header">
<div class="pricing-item-title">Basic</div>
<div
class="pricing-item-price"
data-price-output='{
"0": ["", "Free", ""],
"1": ["$", "13", "/m"],
"2": ["$", "17", "/m"],
"3": ["$", "21", "/m"],
"4": ["$", "25", "/m"]
}'
>
<span class="pricing-item-price-currency"></span>
<span class="pricing-item-price-amount"></span>
<span class="pricing-item-price-after"></span>
</div>
</div>
<div class="pricing-item-features">
<ul class="pricing-item-features-list">
<li class="is-checked">
<div
class="pricing-item-price"
data-price-output='{
"0": ["Demo text 1"],
"1": ["Demo text 2"],
"2": ["Demo text 3"],
"3": ["Demo text 4"],
"4": ["Demo text 5"]
}'
>
<span class="pricing-item-price-currency"></span>
</div>
</li>
<li class="is-checked">Excepteur sint occaecat</li>
<li class="is-checked">Excepteur sint occaecat</li>
<li>Excepteur sint occaecat</li>
<li>Excepteur sint occaecat</li>
</ul>
</div>
</div>
<div class="pricing-item-cta">
<a class="button" href="#">Buy Now</a>
</div>
</div>
</div>
<div class="pricing-item middle">
<div class="overlay"></div>
<div class="pricing-item-inner">
<div class="pricing-item-content">
<div class="pricing-item-header">
<div class="pricing-item-title">Advanced</div>
<div
class="pricing-item-price"
data-price-output='{
"0": ["$", "13", "/m"],
"1": ["$", "17", "/m"],
"2": ["$", "21", "/m"],
"3": ["$", "25", "/m"],
"4": ["$", "42", "/m"]
}'
>
<span class="pricing-item-price-currency"></span>
<span class="pricing-item-price-amount"></span>
<span class="pricing-item-price-after"></span>
</div>
</div>
<div class="pricing-item-features">
<ul class="pricing-item-features-list">
<li class="is-checked">Excepteur sint occaecat</li>
<li class="is-checked">Excepteur sint occaecat</li>
<li class="is-checked">Excepteur sint occaecat</li>
<li class="is-checked">Excepteur sint occaecat</li>
<li class="is-checked">Excepteur sint occaecat</li>
</ul>
</div>
</div>
<div class="pricing-item-cta">
<a class="button" href="#">Buy Now</a>
</div>
</div>
</div>
<div class="pricing-item right">
<div class="overlay"></div>
<div class="pricing-item-inner">
<div class="pricing-item-content">
<div class="pricing-item-header">
<div class="pricing-item-title">Enterprise</div>
<div
class="pricing-item-price"
data-price-output='{
"0": ["$", "22", "/m"],
"1": ["$", "33", "/m"],
"2": ["$", "42", "/m"],
"3": ["$", "88", "/m"],
"4": ["$", "105", "/m"]
}'
>
<span class="pricing-item-price-currency"></span>
<span class="pricing-item-price-amount"></span>
<span class="pricing-item-price-after"></span>
</div>
</div>
<div class="pricing-item-features">
<ul class="pricing-item-features-list">
<li class="is-checked">Excepteur sint occaecat</li>
<li class="is-checked">Excepteur sint occaecat</li>
<li class="is-checked">Excepteur sint occaecat</li>
<li class="is-checked">Excepteur sint occaecat</li>
<li class="is-checked">Excepteur sint occaecat</li>
</ul>
</div>
</div>
<div class="pricing-item-cta">
<a class="button" href="#">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
<script></script>
</body>
</html>
推荐阅读
- javascript - 三元运算符,希望在 JavaScript 中使用多个三元运算符
- php - 将下拉选择发布为链接
- typescript - 如何为 html 元素列表设置类型?
- javascript - Discord JS - 音频播放器状态
- python - Numpy比较两个数组,每个条目取较小的一个
- github - 在子模块路径中运行操作?
- reactjs - 创建反应库 - 资产包
- python - 如何使用来自另一个字典的聚合值创建新字典
- java - Apache camel onException 在原始消息中添加错误详细信息
- mql4 - 请帮我将 Pinescript 转换为 MQL4