在处理同一父元素的多次出现时，如何定位正确的数据属性和子元素？

Question

我有一个自定义 slider 元素。 我想在同一页面中呈现许多 slider 元素，但我遇到的问题是动态 CSS 样式针对常见的属性名称，因此如果我有两个元素#sliderA和#sliderB ，则应该发生在#sliderB上的更改会发生在sliderA上.

我想我需要 JavaScript 来定位相应 slider 元素的data-freq属性。

https://codepen.io/ryanvb92/pen/poNLQEO

你可以猜到，我正在使用别人的笔。 这是原笔。

Answer 1

Css 非常简单

input {
        &:checked {
            + label::after {
                border-width: 4px;
                transform: translate(-50%, -50%) scale(0.75);
            }
  ....

上述规则用于设置已检查输入的样式并按预期工作。 唯一的问题是您为多个input标签提供相同的id 。

  <input type="radio" name="smokingFreq" id="1" value="1" required>
        
  <input type="radio" name="drinkingFreq" id="1" value="1" required>

请注意输入元素如何在不同的滑块之间共享相同的 id。 严格避免重复 ID，因为浏览器希望它们在整个文档中是唯一的。

只需对所有输入使用唯一的 ID。 这样的事情应该可以解决您的问题。

  <input type="radio" name="smokingFreq" id="smokingFreq-1" value="1" required>

  <input type="radio" name="drinkingFreq" id="drinkingFreq-1" value="1" required>