我正在创建一个简单的联系人应用。我有两个名称和信息列表，两个列表都从一个对象数组中插入信息。 1列表用于名称，另一个列表用于编号等。当我点击名称时，第二个列表显示有关框中人员的更多信息。我试图将框的位置设置为与我单击的名称相对应。
我想过使用offset（）但是我不确定我是否正确实现了它，这是我的代码，
function displaysingle(contactid) {
var Email = contactarray[contactid].email;
var Number = contactarray[contactid].number;
var Address = contactarray[contactid].address;
$('#contactinfo').append('<li class="single"><a id="link">' + Email+'</a><br><br>' + Number + '<br><br>' + Address + '</li>')
}
//click event handler to display user information if user is clicked
$('.itemname').on('click', function(event) {
for (i in contactarray)
if ($(event.target).html() === contactarray[i].name) {
$('.single').offset(this);
$(".itemname").css("background-color", "inherit");
$(this).css("background-color", "rgb(79,79,79");
contactid = i
$('#contactinfo').empty();
displaysingle(contactid);
}
为了更好地理解，请查看我的小提琴https://jsfiddle.net/8pbLvtjf/2/
答案 0 :(得分：2)
您可以设置所单击名称的顶部位置，然后将其应用于类.single值并允许它在同一级别上。我已经编辑了CSS。
工作jsfiddle：
https://jsfiddle.net/joshstevens19/8pbLvtjf/7/
在下面的SO上运行的工作示例：
$(document).ready(function() {
function ContactItem (name, email, number,address) {
this.name = name;
this.email = email;
this.number = number;
this.address = '6539 Wilton Ave' + '<br>' + 'Culver City CA 90234';
}
//new object instances of constructor intalized in array of objects
var contactarray = [
new ContactItem('Christian', 'christian@yahoo.com', '323-555-124'),
new ContactItem('Rich', 'rich@tripod.com', '323-555-124'),
new ContactItem('Scott', 'scott@mailinator.com', '323-555-124'),
new ContactItem('Danny', 'danny@hotmail.com', '323-555-124'),
new ContactItem('Taka', 'taka@myspace.com', '323-555-124'),
new ContactItem('Tim', 'tim@netscape.com', '323-555-124'),
new ContactItem('Patrick', 'patrick@live.com', '323-555-124'),
new ContactItem('Jacques', 'jacques@aol.com', '323-555-124')
];
//function to print out names into list
function displayName() {
for (i = 0; i < contactarray.length; i++) {
$('#contacts').append('<li class="itemname"><a href="#">' + contactarray[i].name + '</a></li>');
}
}
//function to print other information based on option choice
function displayinfo () {
$('#contactinfo').empty(); //empties the list
for (i = 0; i < contactarray.length; i++) {
$('#contactinfo').append('<li class="itemname">' + contactarray[i][$('#dropdown').val()] + '</li>');
$(".itemname").css("background-color", "inherit");
} //uses the value of #dropdown that matches object property
}
//function that contains full user information
function displaysingle(contactid) {
var Email = contactarray[contactid].email;
var Number = contactarray[contactid].number;
var Address = contactarray[contactid].address;
$('#contactinfo').append('<li class="single"><a id="link">' + Email+'</a><br><br>' + Number + '<br><br>' + Address + '</li>')
}
displayName();
displayinfo();
$('#dropdown').change(displayinfo); //calls function again if there is a change to #dropdown
//click event handler to display user information if user is clicked
$('.itemname').on('click', function(event) {
for (i in contactarray)
if ($(event.target).html() === contactarray[i].name) {
$('.single').offset(this);
$(".itemname").css("background-color", "inherit");
$(this).css("background-color", "rgb(79,79,79");
contactid = i
$('#contactinfo').empty();
//set top and left position of popup
$("#contactinfo").css( {position:"absolute", top:event.pageY});
displaysingle(contactid);
}
});
})/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html, body {
height: 100%;
}
a {
text-decoration: none;
color: rgb(200, 200, 200);
}
@font-face {
font-family: 'Myriad Pro Regular';
font-style: normal;
font-weight: lighter;
src: url('../fonts/myriad-pro/MYRIADPRO-REGULAR.woff') format('woff');
}
body {
font-family: 'Myriad Pro Regular', sans-serif, serif;
}
/*------------------MAIN----------------------*/
@media (min-width: 20em) {
main {
width: 87.5%;
height: 400px;
background-color: #acacac;
margin: auto;
border-radius: 10px;
box-shadow: 0px 5px 15px 0px black;
}
#top {
height: 12.5%;
background: linear-gradient(to bottom, rgba(62,62,62,1) 2%,rgba(50,50,50,1) 50%,rgba(37,37,37,1) 100%);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom: 2px solid black;
}
h4 {
color: rgb(200, 200, 200);
padding: 8% 0 0 6.4%;
}
/*------------------MID----------------*/
#mid {
height: 76.2%;
background-color: rgb(33,33,33);
}
#contacts {
display: inline-block;
list-style-image: url('../bullet.png');
margin-left: 10%;
width: 30%;
}
#contactinfo {
display: inline-block;
color: rgb(79, 79, 79);
margin-left: -1.9%;
width: 60%;
}
.itemname {
padding: 0.63em 0 0.63em 1em;
border: 1px solid black;
border-left: inherit;
}
.single {
background-color: rgb(72, 72, 72);
border: 1px solid black;
color: rgb(200, 200, 200);
}
#link {
color: rgb(19, 206, 200);
text-decoration: underline;
}
/*---------------BOTTOM------------*/
#bottom {
height: 12.5%;
background: linear-gradient(to bottom, rgba(62,62,62,1) 2%,rgba(50,50,50,1) 50%,rgba(37,37,37,1) 100%);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top: 2px solid black;
box-shadow: 0px -2px 27px 0px black;
}
li.single {
max-width: 70%;
margin-left: 10%;
}
#dropdown {
width: 60%;
height: 60%;
margin: 2.5% 0 0 29%;
background-color: rgb(25, 25, 25);
color: rgb(200, 200, 200);
}
#optionone {
background-color: aqua;
}
}<body>
<main>
<section class="section" id="top">
<h4>Contacts</h4>
</section>
<section class="section" id="mid">
<ul id="contacts"></ul>
<ul id="contactinfo"></ul>
</section>
<section class="section" id="bottom">
<select id="dropdown">
<option value="email">Email</option>
<option value="number">Phone Number</option>
</select>
</section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="scripts/script.js"></script>
</body>
答案 1 :(得分：1)
您可以将点击元素的top和right位置值用于弹出式div，以便它显示在点击的名称右侧。
$('.itemname').on('click', function(event) {
for (i in contactarray)
if ($(event.target).html() === contactarray[i].name) {
$('.single').offset(this);
$(".itemname").css("background-color", "inherit");
$(this).css("background-color", "rgb(79,79,79");
contactid = i
$('#contactinfo').empty();
//set top and left position of popup
var offset = $(this).offset();
$("#contactinfo").css( {position:"absolute", top:offset.top,
left: offset.right});
displaysingle(contactid);
}
});