jQuery Toggle [隐藏] 属性 Bootstrap 4答案

【问题标题】：jQuery Toggle [hidden] Attribute Bootstrap 4jQuery Toggle [隐藏] 属性 Bootstrap 4
【发布时间】：2017-10-26 10:55:54
【问题描述】：

切换新的“Bootstrap 4”[隐藏]-属性的最佳方式是什么。不只是用“display: block”隐藏和显示元素，而是删除和添加属性。

<button type="button" hidden class="hideMe btn  btn-sm">Get Video</button> 
<button class="toggle">toggle</button>

有没有更好的方法是这样的：http://jsfiddle.net/49u2q/123/

$('button.toggle').on('click',function() {
    if ($('button.hideMe ').is('[hidden]')) {
        $('button.hideMe ').removeAttr('hidden');
    } else {
        $('button.hideMe ').attr('hidden','');
    }
});

【问题讨论】：

试试这个jsfiddle.net/49u2q/124 $(this).prev(".hidden").toggle();
需要动态解决方案
怎么不是动态的？
@dazzafact 检查我的答案

标签： jquery twitter-bootstrap toggle hidden attr

【解决方案1】：

使用 toggle()

$('button.toggle').on('click',function() {
  var bool=$(".video_btn").is(":hidden")
  $(".video_btn").toggleClass('hidden')
  $(".video_btn").attr('hidden',!bool)
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button type="button" hidden class="hidden video_btn btn  btn-sm">Get Video</button>

<button class="toggle">toggle</button>

【讨论】：

“隐藏”不会切换。尝试其他属性，例如“MySpecialattribute”

【解决方案2】：

给你一个解决方案

$(document).on('click', 'button.toggle', function() {
  if ($(this).siblings('button.hidden').is('[hidden]')) {
    $(this).siblings('button.hidden').removeAttr('hidden');
  } else {
    $(this).siblings('button.hidden').attr('hidden','');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" hidden class="hidden btn  btn-sm">Get Video</button>
<button class="toggle">toggle</button>

希望这会对你有所帮助。

【讨论】：

不，不会切换属性，只是隐藏/显示它

【解决方案3】：

好的，这是一个写插件的解决方案：我认为它可以在没有任何插件和现有 jquery 函数的情况下工作:-(

http://jsfiddle.net/49u2q/127/

$.fn.toggleAttr = function(attr) {
  return this.each(function() {
    var self = $(this);
        if (self.is('['+attr+']')) {
        self.removeAttr(attr)
    }else{
      self.attr(attr,1)
    }
  });
};


$('button.toggle').on('click',function() {
$('.hiddens').toggleAttr('hidden');

});

【讨论】：

【解决方案4】：

我看到你正在寻找隐藏属性，所以试试这个：

$('button.toggle').on('click', function() {
    if ($("button.hideMe").attr("hidden")) {
        $("button.hideMe").attr("hidden", false)
    } else $("button.hideMe").attr("hidden", true)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" hidden class="hideMe btn  btn-sm">Get Video</button> 
<button class="toggle">toggle</button>

【讨论】：

您的else 语句应该用大括号{ } 括起来