Question

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

姓名：


sm frost

gm frost

电子邮件：


smf@yahoo.com

gmf@gmail.com

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

以下是

中的代码

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

您需要对结构进行大量更改，以便：

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

所以我为这两个事件创建了两个小提琴，见下文：

悬停
点击

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

哈弗

＆＃13;

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");
});

＆＃13;

* {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;}

＆＃13;

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

＆＃13;

按

＆＃13;

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");
});

＆＃13;

* {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;}

＆＃13;

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

＆＃13;

Answer 2

使用JQuery

function changeText2(){
    var name = $('<li>'+$('#name').val()+'</li>');
    var email = $('<li>'+$('#email').val()+'</li>'); 

    $('#demo').append(name);    
    $('#demo1').append(email);

    name.click(function() {
        $('.highlight').removeClass('highlight');
        name.addClass('highlight');
        email.addClass('highlight');
    });

    email.click(function() {
        $('.highlight').removeClass('highlight');
        name.addClass('highlight');
        email.addClass('highlight');
    });
 }

JSFiddle使用点击

如上例所示

http://jsfiddle.net/ycsdd04s/6/

JSFiddle使用悬停

（将click更改为hover）

http://jsfiddle.net/ycsdd04s/5/

突出显示输入文本

2 个答案:

哈弗

按