Fatal编程技术网
  • javascript/
  • Javascript 点击li元素后如何切换ul的id？

Javascript 点击li元素后如何切换ul的id？

javascript jquery

Javascript 点击li元素后如何切换ul的id？,javascript,jquery,Javascript,Jquery,我想在单击li元素后动态更改ul元素的id。然后我将这个id作为字符串传递给str变量。例如，当我单击“驱动程序id=2”的ul更改的驱动程序2 id时 我有这样的想法： <ul class="drivers" id=""> <li><a href="" id="?driver_id=1">Driver 1</a></li> <li><a href="" id="?driver_id=2">D

我想在单击li元素后动态更改ul元素的id。然后我将这个id作为字符串传递给str变量。例如，当我单击“驱动程序id=2”的ul更改的驱动程序2 id时

我有这样的想法：

<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>

<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>
正如一些评论所提到的，这不是一个好主意。
id
属性应该是唯一的，因此通过将
ul
的id设置为其中一个
li
的id，您在页面上创建了两个id，如果您再次尝试搜索，这将屏蔽其中一个id

但是如果您试图使用jquery更改属性，请使用
attr
的第二个参数设置attrib

$('ul.drivers').attr('id', value)
如果要使用class而不是id，请使用jquerys
addClass
方法

$('ul.drivers').addClass(value)
尽管我建议使用自定义数据属性

$('ul.drivers').data('some-name', value) //=> set value
$('ul.drivers').data('some-name') //=> get value
创建数据属性而不是更改id，如下所示：

<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>

<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>
其中
value
是单击的
li
的id。即使您没有两个列表，我也建议您遵循这一点，以保持良好的实践。

使用
id
属性不是一个好主意，因为它们必须是唯一的，并且不应该在整个DOM中更改

相反，
data
属性似乎更适合使用。您可以设置该属性，并使用如下方式访问其值：

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>

$(document).ready(function() {
  $('#list li a').on('click',function() {
    var str = $(this).data('driver');
    console.log(str);
  })
})
下面是一个JS Fiddle示例：

希望有帮助

我强烈建议你不要这样做<代码>id属性并不意味着是暂时的。如果您想动态标识元素，请更改它们的类，而不是基于@Rory所说的，
id
s也应该是唯一的-您所建议的结果将是重复的
id
。同意@Rorymcrossan。但是，如果您想知道如何做，请尝试以下
$（'ul.drivers'）.attr（'id'，'my_new_id'）