Question

我正在尝试使用以下代码动态添加和删除隐藏到某些HTML元素的属性：

<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>

此代码的主要思想是从开头的第一张图片中删除“隐藏”属性，并在<li>点击隐藏所有图片，然后从所选图片中删除“隐藏”属性。

但代码无法正常运行：$().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>

（使用extra ='hidden'chars）

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

Answer 1

为什么不使用jQuery .show（）和.hide（）代替添加和删除隐藏属性？

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

Answer 2

另一种方法是将jquery show()和hide()用于您选择的元素。

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

Answer 3

您使用prop()错误。 prop('string')是 getter prop('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>

API docs here

将您的代码更改为：

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

应该产生预期的效果

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

无法正确添加没有值（'hidden'）的属性到HTML元素

3 个答案:

API docs here