根据jquery ui滑块值隐藏或显示
问题描述 投票：4回答：2
因此，目前我有一个UI滑块，它随着价格的变化而更改价目表上的数据，我似乎无法弄清楚的问题是，如果达到某个值，如何将其中一个或多个框变灰。
我附上一张图片，以解释当在滑块上选择1个用户时要实现的目标，以及在UI滑块上选择2-4个用户时要显示的目标。任何帮助将不胜感激，我真的为此付出了很多努力。
[
当滑块移动时，我需要使以下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
任何帮助都将不胜感激。
2个回答
投票
[要使其按照您想要的方式工作，您必须在每个<div>标签元素内创建带有position:absolute的叠加层pricing-item以及其他样式，以将其放置在pricing-item父元素内，将[C0 ]相对位置，以便将其作为叠加层的位置参考。还为三个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>，则其左列和右列将灰显，如果其为[C0 ]它将使右列变灰，否则将删除布局。
以下是代码段：
01(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");
}
HTML（应在每个内部div下添加mask div，并且可以根据需要增强mask div）
<!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>CSS
https://codepen.io/tahabayi/pen/ExPaOKW
JS
<div class="pricing-item">
<div class="pricing-item-inner">
<div class="pricing-item-inner pricing-item-inner-mask"></div>
.
.
</div>
</div>
最新问题
- Google Analytic GA4 不会禁用 React 应用程序中的默认 page_view 事件
- Quickbooks 与 Android 应用程序集成
- 将用户会员计划添加为 WooCommerce 中的主体类
- 如何提高 FastAPI 端点的响应时间，该端点接受 DXF 文件并返回使用 Matplotlib 后端制作的 PDF，
- ELM327 - 对 090A 命令的奇怪回复
- 同时使用 Laravel Sanctum 和 Octane 时出现超时问题
- Azure DevOps 参数单选按钮仅显示最多三个值
- mysql 使用另一个表中的值更新列
- Jmeter 属性
- 如何在 Helm 中正确设置健康和活力探针
- SQL 中的等效集
- com.google.gson.JsonSyntaxException：android 中的java.lang.IllegalStateException
- 我需要在正文中添加不同的会员计划类别
- Mongoose 中间件更新后不起作用
- node js中当前时间段为早上时如何显示早上好？
- 车把热装填
- TSC 找不到全局对象的名称
- 变量不能在数组中使用
- 我如何使用 vscode 中的实时服务器在移动设备上查看我的 html 文件？
- 使用Android studio的广播组中的一个问题：java和xml