如何在我的 WordPress 网站中使用复选框？

Question

我做了一个切换开关，我想将它集成到我的网站中，但我不确定如何操作。我在我的 WordPress 网站上使用插件 bbPress，希望网站的用户在发表评论时能够点击切换开关，然后他们的输入会显示在他们的评论中。

这是拨动开关的 HTML： `

<!-- ____[TOGGLE BUTTON]____ -->
<div class="toggle">

    <!-- ____[OUTER BOX WITH BORDER LINE]____ -->
    <div class="toggle__box">

        <!-- ____[INPUT WITHOUT VISIBILITY LINKED WITH LABEL]____ -->
        <input type="checkbox" id="toggle-check">

        <!-- ____[TOGGLE LABEL FOR INPUT]____ -->
        <label for="toggle-check" class="toggle__label">

            <!-- ____[TOGGLE THUMB ICON]____ -->
            <div class="toggle__thumb">
                <img src= <?php get_image_for_slider(); ?> >
            </div>

            <!-- ____[TEXT OF TOGGLE]____ -->
            <div class="toggle__text--green">BULLISH</div>
            <div class="toggle__text--red">BEARISH</div>
        </label>

    </div>

</div>

`

然后这是此按钮的 CSS： *, *：：前， *：：后 { 保证金：0；填充：0； -webkit-box-sizing：边框框；框大小：边框框； }

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.toggle {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  ;
}
.toggle input {
  display: none;
  opacity: 0;
}
.toggle__box {
  width: 13rem;
  height: 4rem;
  border-radius: 100px;
  border: 1px solid #707070;
  position: relative;
  overflow: hidden;
}
.toggle__label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  cursor: pointer;
}
.toggle__thumb {
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 50%;
  left: .6rem;
  z-index: 2;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}

.toggle__thumb img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.toggle__text--red,
.toggle__text--green {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 500;
  -webkit-transition: all .005s linear;
  transition: all .005s linear;
  z-index: 0;
}

.toggle__text--red {
  color: #FF001A;
  left: 10%;
  opacity: 0;
  visibility: hidden;
}

.toggle__text--green {
  right: 10%;
  color: #29FF00;
}

.toggle #toggle-check:checked+label .toggle__thumb {
  left: calc(100% - .6rem);
  transform: translate(-100%, -50%);
}

.toggle #toggle-check:checked+label .toggle__text--red {
  opacity: 1;
  visibility: visible;
}

.toggle #toggle-check:checked+label .toggle__text--green {
  opacity: 0;
  visibility: hidden;
}`

有什么方法可以 link 这个 switch/checkbox 的变量，所以当用户点击它时，我可以用它在屏幕上显示一些东西 - 如上所述？我试过使用 isset($_POST["name"] 但似乎没有用。我还看到，也许在 Java 脚本中添加一个事件侦听器可以工作，但我不确定如何在 Java 中编码，所以任何帮助都会很棒！

非常感谢

Answer 1

你应该可以用JS解决这个问题。只需插入这个JS，然后将您想要的所有内容放入函数中即可。

document.getElementById("toggle-check").addEventListener("click", funct1);

function funct1() {
  /* you can put what ever function or thing you want to happen when you click the box here!*/
  document.getElementById('p').innerHTML = "When you click the box this text will show up!";
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.toggle {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  ;
}

.toggle input {
  display: none;
  opacity: 0;
}

.toggle__box {
  width: 13rem;
  height: 4rem;
  border-radius: 100px;
  border: 1px solid #707070;
  position: relative;
  overflow: hidden;
}

.toggle__label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  cursor: pointer;
}

.toggle__thumb {
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 50%;
  left: .6rem;
  z-index: 2;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}

.toggle__thumb img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.toggle__text--red,
.toggle__text--green {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 500;
  -webkit-transition: all .005s linear;
  transition: all .005s linear;
  z-index: 0;
}

.toggle__text--red {
  color: #FF001A;
  left: 10%;
  opacity: 0;
  visibility: hidden;
}

.toggle__text--green {
  right: 10%;
  color: #29FF00;
}

.toggle #toggle-check:checked+label .toggle__thumb {
  left: calc(100% - .6rem);
  transform: translate(-100%, -50%);
}

.toggle #toggle-check:checked+label .toggle__text--red {
  opacity: 1;
  visibility: visible;
}

.toggle #toggle-check:checked+label .toggle__text--green {
  opacity: 0;
  visibility: hidden;
}

`

<input type="checkbox" class="toggle" id="toggle-check">
<p id="p"></p>

如何在我的 WordPress 网站中使用复选框？

How do I use a checkbox within my WordPress website?

html

javascript

css

wordpress

bbpress