如何在切换按钮内添加文字？

Question

我正在使用此插件：http://abpetkov.github.io/switchery/ 这允许我在我的页面上添加一个切换按钮。

我想在按钮本身内添加文本，以便在页面加载时，按钮设置为＆＃34; Employer＆＃34;如果用户切换按钮，则会显示另一个文本＆＃34; Freelancer＆＃34;

我知道我需要使用jQuery以某种方式获取文本和操作字段，但问题是，我无法在按钮内显示文本。它显示在按钮旁边。

我该怎么做？ 不能改变按钮开关上的文本，我会在我想出显示按钮本身内的文本后立即进行。

这是我的代码到目前为止，它非常简单，它适用于文档加载，它将类从hire更改为work但是此刻没有其他任何事情发生，因为我是无法在开关按钮内打印文本。

 <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery('span.user-role').text('Freelaner').removeClass('hire').addClass('work');
        });
    </script>
    <input type="checkbox" class="js-switch" checked />
    <span class="user-role text hire">Employer</span>

Answer 1

您可以使用另一个默认包含文本的插件，但如果您想在此插件的按钮中添加文本，则需要对其进行位更改。

更改是：

1. 增加按钮的width并更改按钮的第一个位置

2. 将文字元素添加到按钮

3. 将CSS文本添加到项目

4. 添加onchange事件以显示/隐藏文字

＆＃13;
＆＃13;
var elem = $(".js-switch")[0];
var init = new Switchery(elem);

$(".js-switch").siblings(".switchery").css("width", "100px").prepend("<span>text</span>").find("small").css("left", "70px");

elem.onchange = function() {
    $(".switchery").find("span").toggle();
};
＆＃13;
.switchery > span {
    margin-left: 25px;
    line-height: 28px;
    font-family: tahoma;
    color: white;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://abpetkov.github.io/switchery/dist/switchery.min.css" rel="stylesheet"/>
<script src="http://abpetkov.github.io/switchery/dist/switchery.min.js"></script>
<input type="checkbox" class="js-switch" checked />
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可以使用伪元素：

.switchery {
  width: 150px; // your width
}
.switchery:before {
  content: 'Work'; // your text
  color: #333;
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
}
.js-switch:checked + .switchery:before {
  color: #fff;
  left: 70px;
}

CODEPEN