无法将没有值的属性（“隐藏”）正确添加到HTML元素[重复]

Question

我正在尝试使用以下代码动态添加和删除隐藏在一些超文本标记语言元素中的属性：

<li><a href="#" onclick="SelectImage( 5 ); return false;">6</a></li>
...
<a href="/image/5"><img class="image_to_be_selected" id="image_5" hidden src="/img/5.jpg"></a>
<script type="text/javascript">
  $('#image_0').removeAttr( 'hidden' );
  function SelectImage( no ) {
    $('.image_to_be_selected').prop( 'hidden' );
    $('#image_'+no).removeAttr( 'hidden' );
  }
</script>

该代码的主要思想是在开始和结束时从第一个图像中删除属性“hidden”（隐藏）

但代码工作不正常：<代码>$（）。prop（）未按需要添加属性。我应该使用<代码>$（）。attr（'hidden'，true），但在这种情况下，HTML将变为：

<a href="/image/5"><img class="image_to_be_selected" id="image_5" hidden='hidden' src="/img/5.jpg"></a>

（带有额外的=“隐藏”字符）

HTML有效性POV是否正确？JQuery中是否有任何函数可以添加没有值的属性？

Answer 1

您使用的prop（）错误prop（'string'）是getterprop（'string'，value）是setter。您正在使用getter并期望它设置值。

所以

$('a').prop('hidden', true);

确实

<a href="/image/5"><img class="image_to_be_selected" id="image_5" hidden src="/img/5.jpg"></a>

和

$('a').prop('hidden', false);

结果在

<a href="/image/5"><img class="image_to_be_selected" id="image_5" src="/img/5.jpg"></a>

将代码更改为：

$('#image_0').prop('hidden', true);
  function SelectImage( no ) {
    $('.image_to_be_selected').prop('hidden',  true);
    $('#image_'+no).prop('hidden', false);
  }

应达到预期效果

或者按照Wbas说的做......

Answer 2

另一种方法是对所选元素使用jquery show（）和hide（）。

$('#elementID').show();

Answer 3

与其添加和删除隐藏属性，为什么不使用jQuery. show（）和. hid（）呢？

$('#image_0').show();
  function SelectImage( no ) {
    $('.image_to_be_selected').hide();
    $('#image_'+no).show();
}