单击li元素后如何切换ul的ID？

Question

I want to dynamically change id of ul element after click on li element. Then I pass this id to str variable as a string. For an example when I click on Driver 2 id of ul changes for "?driver_id=2",

I've got something like this:

<ul class="drivers" id="">
     <li><a href="" id="?driver_id=1">Driver 1</a></li>
     <li><a href="" id="?driver_id=2">Driver 2</a></li>
     <li><a href="" id="?driver_id=3">Driver 3</a></li>
 </ul>

and jquery:

var str=$('ul.drivers').attr('id');

Answer 1

as some of the comments mentioned, this is not a good idea. The id attribute is supposed to be unique, so by setting the id of the ul to the id of one of the li s, youre creating two ids on your page, which will mask one of them if you try searching for it again.

but if you're trying to change attributes with jquery, use the second argument of attr to set the attrib

$('ul.drivers').attr('id', value)

if you want to use class instead of id, use jquerys addClass method.

$('ul.drivers').addClass(value)

though i would recommend using a custom data attribute

$('ul.drivers').data('some-name', value) //=> set value
$('ul.drivers').data('some-name') //=> get value

Answer 2

Using the id attribute isn't a great idea because they must be unique, and shouldn't be changing throughout the DOM.

Instead, the data attribute seems like a better use. You can set the attribute, and access its value using something like this:

HTML

<ul class="drivers" id="list">
   <li><a href="#" data-driver="?driver_id=1">Driver 1</a></li>
   <li><a href="#" data-driver="?driver_id=2">Driver 2</a></li>
   <li><a href="#" data-driver="?driver_id=3">Driver 3</a></li>
</ul>

JavaScript

$(document).ready(function() {
  $('#list li a').on('click',function() {
    var str = $(this).data('driver');
    console.log(str);
  })
})

Here it is in a JS Fiddle example: https://jsfiddle.net/igor_9000/wh3v1wsk/

Hope that helps!

Answer 3

Instead of changing the id, create a data attribute, like this:

<ul class="drivers" id="driverlist-1" data-active-driver-id="">
  <li><a href="" id="?driver_id=1">Driver 1</a></li>
  <li><a href="" id="?driver_id=2">Driver 2</a></li>
  <li><a href="" id="?driver_id=3">Driver 3</a></li>
</ul>

<ul class="drivers" id="driverlist-2" data-active-driver-id="">
  <li><a href="" id="?driver_id=4>Driver 4</a></li>
  <li><a href="" id="?driver_id=5">Driver 5</a></li>
  <li><a href="" id="?driver_id=6">Driver 6</a></li>
</ul>

Data Attributes are meant to store data you need to control for any reason. Please, refer to this link .

Then you change it like this, accessing your ul with its id, because think, if you had two uls each one with its own drivers , you'd guarantee the proper one would be changed:

$('#driverlist-1').data('active-driver-id', value); // setting some value to it
var str = $('#driverlist-1').data('active-driver-id'); // getting stored value

where value is the id of the clicked li . I'd recommend following this even if you don't have two lists at all, just to keep good practices.