Question

单击时如何添加/删除属性？

这是我到目前为止尝试过的。

$('.btn').click(function() {
  $(this).attr("title", "selected").siblings().removeAttr("title", "selected");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <button title="selected" class="btn">click</button>
  </li>
  <li>
    <button class="btn">click</button>
  </li>
  <li>
    <button class="btn">click</button>
  </li>
</ul>

单击按钮时，添加属性“已选择”，其他属性则删除属性“已选择”。

这是演示， https://jsfiddle.net/a8egp275/3/

我该如何解决？请帮忙。

Answer 1

问题是因为.btn元素不是同级元素，因此siblings()不返回任何内容。

要解决此问题，您可以使用closest()获取最近的公共祖先，然后使用find() .btn个元素，不包括被单击的元素。另请注意，removeAttr()仅需要一个参数。要删除的属性名称。试试这个：

$('.btn').click(function() {
  var $btn = $(this).attr("title", "selected");
  $(this).closest('ul').find('.btn').not($btn).removeAttr('title');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <button title="selected" class="btn">click</button>
  </li>
  <li>
    <button class="btn">click</button>
  </li>
  <li>
    <button class="btn">click</button>
  </li>
</ul>

Answer 2

您可以使用.btn类从所有dom中删除title属性，然后将标题添加到所选元素中

$('.btn').click(function() {
  $('.btn[title ="selected"').removeAttr("title")
  $(this).attr("title", "selected");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <button title="selected" class="btn">click</button>
  </li>
  <li>
    <button class="btn">click</button>
  </li>
  <li>
    <button class="btn">click</button>
  </li>
</ul>

Answer 3

删除属性时，只需指定属性名称
因此您需要执行以下操作：

    $('.btn').click(function() {
        $('.btn').removeAttr("title");
        $(this).attr("title", "selected");
    });

Answer 4

使用属性选择器选择当前选择的

$('.btn').click(function() {
  $('[title=selected]').removeAttr("title");
  $(this).attr("title", "selected");
});

[title=selected] { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <button title="selected" class="btn">click</button>
  </li>
  <li>
    <button class="btn">click</button>
  </li>
  <li>
    <button class="btn">click</button>
  </li>
</ul>

Answer 5

您应该执行以下操作：

$('.btn').click(function() {

    //get the attr title and check later if it exist
    var attr = $(this).attr('title');

  //remove the selected attr from all btns
  $('.btn[title]').removeAttr('title');

  //add the attr only if it didnt exist before
  if(typeof attr === typeof undefined || attr === false){
        $(this).attr('title', 'selected');
  }

});

https://jsfiddle.net/a8egp275/42/

注意：这段代码将一直选择一个按钮，如果您希望其表现为复选框而不是单选按钮，则需要执行以下操作：

amp-list

https://jsfiddle.net/a8egp275/45/

Answer 6

您的事件处理程序还可以。但是看看jQuery documentation。它指出，removeAttr（）函数仅将属性名称作为参数。另外，由于attr（）函数不会返回jQuery对象，因此您还必须为add和remove编写单独的语句。

TLDR：

$('.btn').click(function() {
  $(this).attr("title", "selected");
  $(this).siblings().removeAttr("title");
});

如果您想使用siblings（）函数，也需要更改HTML结构：）

单击时如何添加/删除属性

6 个答案: