JQuery 无法在 .show() 之后显示隐藏元素（复选框）答案

【问题标题】：JQuery can't show hidden element (checkbox) after .show()JQuery 无法在 .show() 之后显示隐藏元素（复选框）
【发布时间】：2014-01-27 11:51:43
【问题描述】：

现在我正在解决一个巨大的谜团，为什么 JQUery 不在我的 RoR Web 应用程序中显示我的隐藏输入。这段代码可能不太好（我对 JQuery 或 JS 很陌生），但我想知道为什么它不会显示我的隐藏元素而是用我想要的逻辑更改标签，即使它在同一个代码块中。

你有什么合理的解释为什么 checkbox.show();不会显示元素？我是否必须使用不同的选择器或类似的东西选择复选框？ jQuery代码：

$(document).ready(function () {
      var checkbox = $('#event_halfday');
      $('#others #event_start_at').datepicker().on('changeDate', function () {
          var start = $('#others #event_start_at').val();
          var end = $('#others #event_end_at').val();
          if(start != end) {
              if($('#event_halfday').attr('type') == 'hidden') {}
              else {
                  checkbox.val("0");
                  checkbox.hide();
                  $("label[for='event_halfday']").text("You can't create event where From: is not the same as To: as a halfday.")
              }
          }
          else {
              $("label[for='event_halfday']").text("Is this a halfday event?")
              checkbox.show();
          }
      });
  });

该复选框是由 simple_form gem 生成的，所以它看起来像这样 = f.input :halfday, label: "Is this a halfday event?", :default => false 并且生成的 http 是：

<div class="form-group boolean optional event_halfday">
    <input name="event[halfday]" type="hidden" value="0" />
    <label class="boolean optional checkbox" for="event_halfday">
        <input class="boolean optional" id="event_halfday" name="event[halfday]" type="checkbox" value="1" />Is this a halfday event?</label>
</div>
</div>

感谢您的回复和您的宝贵时间。祝你有美好的一天！

【问题讨论】：

你有id为event_halfday的元素吗？如果元素存在，它是如何被隐藏的 - 有一些额外的类或标准style='display: none'。
是的，它在“问题”帖子中。它被 JQuery 调用隐藏了 .hide();就可以了。
您的浏览器上安装了 firebug 或类似工具。如果是这样，请尝试从控制台手动运行('#event_halfday').show()。还要检查复选框及其父项的样式。
当我在 firebug 控制台中调用 $('#event_halfday').show() 时，它会返回我的 object[] 实例，但它不显示复选框：(
是字面意义上的object[ ] 还是软管支架之间有什么东西？

标签： javascript jquery html ruby-on-rails simple-form

【解决方案1】：

您可以尝试更改此设置：

if($('#event_halfday').attr('type') == 'hidden') {

到这里：

if($('#event_halfday:visible').length == 0) {

或

if($('#event_halfday').is(':hidden')) {

所以对我来说你的最终代码应该是这样的：

$(document).ready(function () {
      var checkbox = $('#event_halfday');
      $('#others #event_start_at').datepicker().on('changeDate', function () {
          var start = $('#others #event_start_at').val();
          var end = $('#others #event_end_at').val();

          if(start != end && checkbox.is(':visible')) {
              checkbox.val("0");
              checkbox.hide();
              $("label[for='event_halfday']").text("You can't .....")
          } else {
              $("label[for='event_halfday']").text("Is this a ...")
              checkbox.show();
          }
      });
  });

更新：

像这样使用&&而不是if中的另一个if来改变你的if条件：

if(start != end && checkbox.is(':visible')) {

【讨论】：

谢谢;) 该代码只是在开发中，这与最终代码无关:) 但这似乎更好，谢谢:)
但问题是，那个 checkbox.show();即使调用了这部分代码，实际上也没有显示元素（我知道是因为标签发生了变化）

【解决方案2】：

这是因为 .show() 使用 CSS 显示项目，所以如果您使用 CSS 隐藏了一个元素（通过 display: none），.show() 将应用 display: block。但是，您的元素通过 type 属性显式隐藏，因此 CSS 在此上下文中无关紧要。要显示该项目，您可能需要这样做：

checkbox.attr('type', 'radio');

【讨论】：

该类型实际上是复选框，但即使我做了 checkbox.attr('type', 'checkbox');它不起作用：（
由于 jQuery 不允许删除或更改 type 属性，您可能想试试这个：checkbox[0].removeAttribute('type'); checkbox[0].setAttribute('type', 'checkbox');

【解决方案3】：

所以我用这段代码解决了这个问题：

$(document).ready(function () {
var checkbox = $('#event_halfday');
$('#others #event_start_at').datepicker().on('changeDate', function(){
  var start = $('#others #event_start_at').val();
  var end = $('#others #event_end_at').val();
  if(start != end && checkbox.is(':visible')){
    checkbox.val("0");
    checkbox.css('display','none');        
  } else {
    checkbox.css('display','block');

          }
}); 
});

问题还在于更改此输入的标签。当我更改时，复选框不会再次出现。谢谢大家！

【讨论】：

啊，很明显！当你找到它时，它总是很容易。 :)
是的:) 但是非常感谢BroiSatse！非常感谢您的帮助:)

【解决方案4】：

隐藏的输入字段应该保持隐藏状态。我认为您想要做的是使用文本类型的普通输入字段并使用 css 隐藏它。然后你就可以使用 jQuery 来展示它了。

然后复选框的其余代码 show()/hide() 将相应地工作。

【讨论】：

【解决方案5】：

查看FIDDLE

** HTML **

      <div class="form-group boolean optional event_halfday">
    <input name="event[halfday]" type="hidden" value="0" />
     <input class="boolean optional" id="event_halfday" name="event[halfday]" type="checkbox" value="1" />
    <label class="boolean optional checkbox" for="event_halfday">
       Is this a halfday event?</label>
</div>
</div>

** jQuery **

    var checkbox = $('#event_halfday');
var start = "01-04-2014";
          var end =  "05-04-2014";
          if(start != end) {
              if($('#event_halfday').attr('type') == 'hidden') {}
              else {
                  checkbox.hide();
                  $("label[for='event_halfday']").text("You can't create event where From: is not the same as To: as a halfday.")
              }
          }
          else {
              $("label[for='event_halfday']").text("Is this a halfday event?")
              checkbox.show();
          }

【讨论】：

【解决方案6】：

试试 $checkbox.show(); $checkbox.hide(); $checkbox.value(0

【讨论】：

【解决方案7】：

根据您的要求.. 我认为这就是您想要的：

if(checkbox.is(':visible')){ //do things }
else { checkbox.show(); }

基本检查程序示例：http://jsfiddle.net/9yfkd/1/

【讨论】：

我不确定其余的 OP 代码，但 if($('#event_halfday').attr('type') == 'hidden') 似乎是错误的，尤其是当 $('#event_halfday') 已经是 var checkbox 时。当您可以从变量中调用时，重新创建是没有意义的。这就是他们在那里的原因。这只是检查checkbox 是否可见，如果不可见，则执行操作。
我像用户 Jai 所说的那样更改了这部分代码（感谢 Jai），但这没关系。 if/else 逻辑没有错误。 checkbox.show(); 所在的那部分代码is 被调用，但它不会显示元素。
我不确定您到底想要完成什么，但$('#event-halfday') 的类型是一个复选框... hidden 与类型无关。如果您的 CSS 设置为 display:none 或者您已使用 checkbox.hide() 将其隐藏，则 checkbox.show() 将起作用。您的 if 语句似乎是错误的。另外：显示/隐藏不会改变不透明度，所以如果你将不透明度设置为 0 并使用checkbox.show()，它将不起作用。它只是将其更改为display:block
@Samah 检查我添加到答案中的小提琴。您会看到，如果满足条件：如果框可见，则将其隐藏。或者，它显示它。两个嵌套语句仍然必须满足第一个条件。
那就是重点。我知道 if/else 逻辑很好，因为标签发生了变化，并且它与 checkbox.show(); 在同一个代码块中。我在隐藏之前或之后没有对不透明度做任何事情，所以我想这不是重点。