点击更改ID

Question

I know how to change a class name with another class upon click, but not sure how to do so when using id instead.

Below is how the class is setup:

<script>

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

The reason for that is that the class is already being used and i have to use the id to style it instead.

Answer 1

Plain Javascript approach:-

This approach takes advantage of the this keyword as follows...

HTML:

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

JS:

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

or simply (in one line) as part of the HTML

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

---

jQuery approach:-

Use the attr() function as follows...

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

---

EDIT: As requested, I will give a piece of code to toggle between 2 ids.

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

You can use the attr() function

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

Answer 3

You can use

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

But i would use classes and add important to override existing css rules

Hope i helped

Answer 4

Instead of changing the id, do it with multiple classes. This could help you...

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

Answer 5

i have to use the id to style it instead.

I suggest you not to do this because in the dom structure id s have most preference against the class names. So this would be little difficult to override the styles which have been applied with the ids.

Instead i would recommend to use classes instead:

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

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

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

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

Answer 6

You should not change an id. If you need to use a different selector to select the same element, add another class to the element, eg

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

Then you just need to use a different selector method:

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

Then you can style the element with:

.SomethingMeaningful{

}