Question

这是实际的“ Swticher”生成器：https://proto.io/freebies/onoff/

我不清楚如何向事件中添加文本-因此，当开关处于默认状态时，会显示某些文本，反之亦然。

这是HTML：

SELECT *
FROM (
    SELECT 
        article_id, 
        id, 
        article_published_date,
        ROW_NUMBER() OVER(PARTITION BY article_id ORDER BY prediction_date DESC) rn
    FROM prediction 
) x WHERE rn = 1
ORDER BY article_published_date DESC
LIMIT 3;

我试图将类添加到

标记中，但没有任何乐趣。

感谢所有帮助。

Answer 1

您可以通过DevTools复制粘贴该站点使用的CSS。无论如何，他们要做的是，最初将复选框设置为选中，这使左边距为0，这显示了具有“ ON”文本的:: before伪元素。在未选中的情况下，margin-left设置为-100％，它显示:: after带有“ OFF”文本的伪元素。

这是相关的CSS-

.onoffswitch-checkbox {
    display: none;
}

.onoffswitch-inner::before {
    content: "ON";
    padding-left: 10px;
    background-color: #34A7C1;
    color: #FFFFFF;
}

.onoffswitch-inner::after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE;
    color: #999999;
    text-align: right;
}

.onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}

这是JSFiddle中的全部代码-https://jsfiddle.net/0f4rbLmo/1/

编辑：如果要基于开关切换div，则可以定义隐藏类--

.triggeredDiv.hidden {
  display: none;
}

然后在触发事件时根据javascript中的复选框值触发它。

function toggleDiv() {
  if (document.getElementById('myonoffswitch').checked) {
    document.querySelector('.triggeredDiv').classList.remove('hidden');
  } else {
    document.querySelector('.triggeredDiv').classList.add('hidden');
  }
}
document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);

JSFiddle-https://jsfiddle.net/g7qm2txs/

如何将文本添加到此CSS“切换器”“拨动开关”

1 个答案: