根据 jquery ui 滑块值隐藏或显示

Question

所以目前我有一个 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>

这里是link到codepen for the code: https://codepen.io/daniel-smit/pen/ZEQELRa

如有任何帮助，我们将不胜感激。

Answer 1

要使其以您想要的方式工作，您必须在每个 pricing-item 标记元素内创建一个带有 position:absolute 的叠加层 <div> 以及一些其他样式以将其放置在其中它的 pricing-item 父级，给 pricing-item 相对位置，这样它将成为叠加层的位置参考。还要为三个pricing-item分别加上unique class，我分别给left、middle和rightclass，方便大家参考它们基于滑块 <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";
  });
}

这段代码首先reset/remove覆盖所有元素<div>然后检查<range>输入值，如果值为0它将变灰-out 左列和右列，如果它 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>

Answer 2

这是更新后的代码： https://codepen.io/tahabayi/pen/ExPaOKW

HTML（maskdiv需要在每个innerdiv下加上，maskdiv可以根据需要增强）

    <div class="pricing-item">
        <div class="pricing-item-inner">
            <div class="pricing-item-inner pricing-item-inner-mask"></div>
                .
                .
        </div>
    </div>

CSS

    .pricing-item-inner {
        .
        .
        position: relative;
    }
    .mask {
        display: block !important;
    }
    .pricing-item-inner-mask {
        background: gray;
        opacity: 80%;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1;
        display: none;
    }

JS

    .
    .
    pricingOutputObj.after = pricingOutputEl.querySelector(
        ".pricing-item-price-after"
    );
    pricingOutputObj.mask = pricingOutputEl.parentNode.parentNode.parentNode.querySelector(
        ".pricing-item-inner-mask"
    );
    .
    .
    if (outputObj.after)
        outputObj.after.innerHTML = outputObj.data[input.el.value][2];
    if (outputObj.mask) {
        outputObj.mask.classList.remove("mask");
        if ((input.el.value == '0' && (i == 0 || i ==3)) || (input.el.value == '1' && i == 3)) {
          outputObj.mask.classList.add("mask");
        }
    }
    .
    .

根据 jquery ui 滑块值隐藏或显示

Hide or show based on jquery ui slider value

jquery

user-interface

slider

hide

show