0

我在 HTML 文档中有两个列表。两个列表都包含不同的数据。

我的收获是，如果用户在一个列表中选择项目，那么相同的项目应该被添加到同一位置的另一个列表中。

例如。

list 1  - Hi, Hello       
list 2  - Thanks, Welcome

假设用户"Hi"在 List1 中选择，然后在 List2 中"Thanks"被替换"Hi"为相同位置的那个list2[0]。

我在internate上读到我们可以通过使用java脚本来实现这一点，但我还没有得到任何解决方案。

请帮我。

谢谢

4

1 回答 1

0

假设我们的标记如下：

<div>
  <ul id='list-1'>
    <li>Hi</li>
    <li>Hello</li>
  </ul>
</div>

<div>
  <ul id='list-2'>
    <li>Thanks,</li>
    <li>Welcome</li>
 </ul>
</div>

我们有以下javascript：

首先，我们选择两个列表元素：

var listOne = document.getElementById('list-1')
   ,listTwo = document.getElementById('list-2');

然后，我们在这些元素的子元素中查找列表项：

var listOneItems = listOne.getElementsByTagName('li') //returns an array
   ,listTwoItems = listTwo.getElementsByTagName('li');

接下来，我们设置单击第一个列表中的列表项时要执行的操作：

for(var i=0; i<listOneItems.length; i++){
 /*we use swap.call so that the function is in the context of this
   list item*/
 listOneItems[i].onclick = swap.call(listOneItems[i], i);   
}

现在我们需要定义swap函数：

/*this function returns the listener for the element, using a closure
  to bind the correct elements*/
function swap(i){
  var elem = this;
  return function(){
    listTwoItems[i].innerHTML = elem.innerHTML;  
  }
}

你可以看到它在这里运行

于 2013-01-14T07:16:10.863 回答