Question

我知道如何在点击时使用其他类更改类名，但在使用id时不知道如何更改。

以下是该课程的设置方式：

<script>

    $(function(){
      $(".collapseArrow").click(function(){
        $(".collapseArrow").removeClass("collapseArrow")
        $(this).addClass("collapseArrowUp")
        return false;
      })
    })
    </script>

原因是该类已被使用，我必须使用id来设置它的样式。

Answer 1

简单的Javascript方法： -

此方法利用this关键字，如下所示......

HTML：

<div id="oldId" onclick="changeId(this)"></div>

JS：

function changeId(element) {
    element.id = "someNewId";
}

或简单地（在一行中）作为HTML的一部分

<div id="oldId" onclick="this.id='someNewId';"></div>

jQuery方法： -

使用attr()功能，如下所示......

$(function(){
     $("#oldId").click(function(){
       $("#oldId").attr("id","newId");
        return false;
     });
});

编辑：根据要求，我将提供一段代码以在2个ID之间切换。

HTML：

<div id="firstId" onclick="toggleId(this)"></div>

JS：

function toggleId(element) {
    if(element.id == "firstId") {
        element.id = "secondId";
    } else { //This will only execute when element.id == "secondId"
        element.id = "firstId";
    }
}

Answer 2

您可以使用attr()功能

<script>
  $(function(){
     $("#collapseArrow").click(function(){
       $("#collapseArrow").attr('id',"collapseArrowUp");
        return false;
     });
  });
</script>

Answer 3

您可以使用

 $(this).attr("id"',"new id");

但我会使用类并添加重要来覆盖现有的css规则

希望我帮助

Answer 4

不是更改id，而是使用多个类。这可以帮到你...

$(function(){
  $(".collapseArrow").click(function(){
    $(".collapseArrow").removeClass("up")
    $(this).addClass("up")
    return false;
  })
})

Answer 5

我必须使用id来设置它的样式。

我建议你不要这样做，因为在dom结构id中，最喜欢的是类名。因此，覆盖已经应用了id的样式会有点困难。

相反，我建议改用类：

$(function() {
  $(".collapseArrow").click(function() {
    $(this).toggleClass("collapseArrow collapseArrowUp")
    return false;
  });
});

＆＃13;

$(function() {
  $(".collapseArrow").click(function() {
    $(this).toggleClass("collapseArrow collapseArrowUp")
    return false;
  });
});

＆＃13;

.collapseArrow::before {
  content: "[-]"
}
.collapseArrowUp::before{
  content: "[+]"
}

＆＃13;

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

＆＃13;

Answer 6

您不应该更改ID。如果需要使用不同的选择器来选择相同的元素，请在元素中添加另一个类，例如

<span class="collapsArrow SomethingMeaningful"></span>

然后你只需要使用不同的选择器方法：

$( "span[class~='SomethingMeaningful']" )
    .removeClass("collapseArrow")
    .addClass("collapseArrowUp");

然后你可以使用：

设置元素的样式

.SomethingMeaningful{

}

点击后更改ID

6 个答案: