javascript - 突出显示输入文本生成的列表中的项目

Question

我有两个如下所示的列表。

Name:

1. sm frost
2. gm frost

Email:

1. smf@yahoo.com
2. gmf@gmail.com

这两个列表是由两个输入表单动态生成的。我正在尝试突出显示列表中的项目。例如，我需要同时突出显示 Name 1 和 Email 1。我尝试使用悬停功能并突出显示 css 样式但没有成功。

代码如下

http://jsfiddle.net/sanm/ycsdd04s/3/

HTML代码:

   Bidders:<br> 
   <br>   
   Name: <input type="text" id="name" class="input" placeholder="Type Name of Bidder" > <br> 
   <br>    
   Email: <input type="email" id="email" class="input" placeholder="example@example.com">   
   <br>
   <br> 
   <input type='button' onclick='changeText2()'   value='Add'/> 
   <br>
   <br>    
   <br>    


    Bidders: <br>    

    <p> Name: </p>

    <ol id="demo"> 
    </ol>

    <p> Email: </p>
    <ol id="demo1">
    </ol>      

JavaScript 代码:

    function changeText2(){
    var name = document.getElementById('name').value;
    var email = document.getElementById('email').value;    
    var node1=document.createElement("LI");
    var node2=document.createElement("LI");    
    var textnode=document.createTextNode(name);  
    var textnode1=document.createTextNode(email);      
    node1.appendChild(textnode);
    node2.appendChild(textnode1);    
    document.getElementById("demo").appendChild(node1);  
    document.getElementById("demo1").appendChild(node2);     
    }

非常感谢您的帮助。

Answer 1

您需要对结构做很多更改，以便:

1. 保持标签的语义。
2. 有效使用 jQuery 的功能。

所以我为这两个事件创建了两个 fiddle ，见下文:

1. 悬停
2. 点击

这个有用吗？如果有任何问题，请在评论中告诉我。

悬停

var count = 0;
function changeText2() {
  count++;
  var name = $('#name').val();
  var email = $('#email').val();    
  $("#names").append('<li data-n="' + count + '" class="n' + count + '">' + name + '</li>');
  $("#emails").append('<li data-n="' + count + '" class="n' + count + '">' + email + '</li>');
}

$("#names, #emails").on("mouseover", "li", function () {
  $(".n" + $(this).data("n")).addClass("active");
});
$("#names, #emails").on("mouseout", "li", function () {
  $(".n" + $(this).data("n")).removeClass("active");
});

* {font-family: 'Segoe UI', sans-serif; margin: 0; padding: 0;}
h3 {margin: 15px 0;}
label {display: block;}
label strong {font-weight: normal; display: inline-block; width: 75px; text-align: right; margin-right: 5px;}
.btn {padding: 2px 5px; margin: 10px 10px 10px 85px;}
ol li {margin-left: 2em;}
ol li:hover,
.active {background-color: #99f;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Add Bidder</h3>
<label>
  <strong>Name:</strong>
  <input type="text" id="name" class="input" placeholder="Type Name of Bidder" />
</label>
<label>
  <strong>Email:</strong>
  <input type="email" id="email" class="input" placeholder="example@example.com" />
</label>
<input type="button" onclick="changeText2()" value="Add" class="btn" />

<h3>Bidders</h3>
<h4>Names</h4>
<ol id="names"></ol>
<h4>Emails</h4>
<ol id="emails"></ol>

点击

var count = 0;
function changeText2() {
  count++;
  var name = $('#name').val();
  var email = $('#email').val();    
  $("#names").append('<li data-n="' + count + '" class="n' + count + '">' + name + '</li>');
  $("#emails").append('<li data-n="' + count + '" class="n' + count + '">' + email + '</li>');
}

$("#names, #emails").on("click", "li", function () {
  $(".n" + $(this).data("n")).toggleClass("active");
});

* {font-family: 'Segoe UI', sans-serif; margin: 0; padding: 0;}
h3 {margin: 15px 0;}
label {display: block;}
label strong {font-weight: normal; display: inline-block; width: 75px; text-align: right; margin-right: 5px;}
.btn {padding: 2px 5px; margin: 10px 10px 10px 85px;}
ol li {margin-left: 2em;}
.active {background-color: #99f;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Add Bidder</h3>
<label>
  <strong>Name:</strong>
  <input type="text" id="name" class="input" placeholder="Type Name of Bidder" />
</label>
<label>
  <strong>Email:</strong>
  <input type="email" id="email" class="input" placeholder="example@example.com" />
</label>
<input type="button" onclick="changeText2()" value="Add" class="btn" />

<h3>Bidders</h3>
<h4>Names</h4>
<ol id="names"></ol>
<h4>Emails</h4>
<ol id="emails"></ol>