jQuery toggle between two ID's

问题: This is my first question on StackOverflow Why does the following code not work? jQuery(document).ready(function($) { $("#red").click(function() { $...

问题:

This is my first question on StackOverflow

Why does the following code not work?

jQuery(document).ready(function($) {
  $("#red").click(function() {
    $(this).attr("id", "green");
  });

  $("#green").click(function() {
    $(this).attr("id", "red");
  });
});
div {
  margin: 0 auto;
  width: 100px;
  height: 100px;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="red">

(See also https://codepen.io/thomasmalley/pen/OqWNaM)

The red square becomes green but on a second click doesn't become red again.


回答1:

The issue is because you assign the event handler on load, before the #green element exists.

To fix this you need to use delegated event handlers so that the element selector is evaluated when the event occurs:

jQuery(function($) {
  $(document).on('click', "#red", function() {
    $(this).attr("id", "green");
  });

  $(document).on('click', "#green", function() {
    $(this).attr("id", "red");
  });
});
div {
  margin: 0 auto;
  width: 100px;
  height: 100px;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="red"></div>

That being said, it's not great practice to be changing id attributes at runtime. They should be static. A much better idea would be to toggle a class on the element instead, which governs the styling.

jQuery(function($) {
  $('#foo').click(function() {
    $(this).toggleClass('green');
  });
});
#foo {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: red;
}

#foo.green {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo"></div>


回答2:

First, there is div with id red and after clicking that div it switches id to green that is dynamically so in this case we use event-delegation. Try below code -

jQuery(document).ready(function($) {
  $(".parent").on('click', '#red', function() {
    $(this).attr("id", "green");
  });

  $(".parent").on('click', '#green', function() {
    $(this).attr("id", "red");
  });
});
div {
  margin: 0 auto;
  width: 100px;
  height: 100px;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div id="red"></div>
</div>


回答3:

This is happening because when you load the page there is no element with the id green for a click event to be added to.

Instead, you can use event delegation by using:

$(document).on('click', '#red', function() {...}

and

$(document).on('click', '#green', function() {...}

This way, your click event will be applied to the element with the id green.

See working example below:

jQuery(document).ready(function($) {
  $(document).on('click', '#red', function() {
    $(this).attr("id", "green");
  });

   $(document).on('click', '#green', function() {
    $(this).attr("id", "red");
  });
});
div {
  margin: 0 auto;
  width: 100px;
  height: 100px;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="red"></div>


回答4:

Since the id is added dynamically, the code $("#green").click(function() { when loaded will not find element with id green so the click event is not set for that element. Thus you can add a listener on document level:

jQuery(document).ready(function($) {
  $(document).on('click', 'div', function(){
    var id = $(this).attr('id');
    if(id === 'red'){
      $(this).attr("id", "green");
    } else {
      $(this).attr("id", "red");
    }
  });
});
div {
  margin: 0 auto;
  width: 100px;
  height: 100px;
}
#red {
  background-color: red;
}

#green {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="red">


回答5:

change script

 $(document).on('click','#red',function() {
    $('#red').attr("id", "green");
  });

  $(document).on('click','#green',function() {
    $('#green').attr("id", "red");
  });

回答6:

pleas try this code:

<div id="wrapper">
   <div id="red">
</div>


 $("#wrapper").click(function() {
    var e = $(this).find('div');
     ( e.attr('id')) == 'red' ? (e.attr('id', 'green')) : (e.attr('id', 'red')) ;
 });
  • 发表于 2019-03-07 15:41
  • 阅读 ( 160 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除