jquery - 切换 HTML "spinner"输入的显示

Question

我找到了一种使用 CSS 根据是否选中单选框来切换 span 或 input 元素可见性的方法(受此启发 question )。

但是，一旦应用 jQueryUI 微调器格式，我就失去了这种切换效果。

这jsFiddle展示了 CSS 如何适用于 span 元素，但不适用于 input。事实上，只要我应用微调器，整个 input 就会消失。

有什么线索可以说明为什么会发生这种情况，以及如何使用 CSS 切换其可见性？

这是我在 fiddle 中使用的 CSS:

    /* Control visibility of SPAN and INPUT (with jqueryui spinner class)
cf. https://stackoverflow.com/questions/21269376/radio-button-show-hide-content
*/

/*The span works fine*/
span#some-text {
    display:none;
}
input#on-input:checked ~ span#some-text{
  display:inline;
}
input#systematic-input:checked ~ span#some-text{
  display:none;
}

/*The input is only visible when the spinner format isn't applied (i.e. commenting all CSS below this point). Even so, the hide/show effect doesn't work. Why?*/

/*
input#spinner-on {
    display:none;
}
input#on-input:checked ~ input#spinner-on{
  display:inline;
}
input#off-input:checked ~ input#spinner-on{
  display:none;
}
*/

Answer 1

jQueryUI 微调器将输入包装在一个 span 元素中。

将微调器输入包装在您指定的新范围内，并相应地应用 CSS。

span#spinnerWrapper {
     display:none;
}
input#on-input:checked ~ span#spinnerWrapper{
  display:inline;
}
input#off-input:checked ~ span#spinnerWrapper{
  display:none;
}

检查这个 jsFiddle

http://jsfiddle.net/scc0jyns/2/