我有两个列表：
当我从组中选择一个来宾时，我要自动滚动第一个列表以显示所选来宾。
我尝试将HTML标签锚定与HREF一起使用，但这不起作用。 我尝试了data-spy =“ scroll”，但我读到的所有内容都是关于NAV列表的，而与单个链接无关。
以下是显示完整列表的DIV：
<div class="list-group-flush p-0 pre-scrollable" id="guestslist"></div>
此代码创建完整列表：
function shownnonassignedguests() {
var showall = $( '#showalltoggle' ).text();
var addgroup, nomembership, imagefile, icon;
var gn, gnid, email, group, list = '';
if ( $( '#searchinputguests' ).val() == '' ) {
$.ajax( {
type: 'POST',
dataType: "json",
url: "ajaxphp/group_functions.php",
data: {
showall: showall,
function: 'showunassignedguests1'
},
success: function ( data ) {
//console.dir (data);
$.each( data.guests, function ( i, obj ) {
gn = 'gn' + obj.account_id;
gnid = 'gnid' + obj.account_id;
email = obj.account_email;
if ( group_id === 0 || group_full ) {
allowadd = 'disabled rel="tooltip" title="The group is either full or not selected. Select another group or remove a guest first in order to add this one."'
//icon = "far fa-times-circle";
icon = "fas fa-arrow-alt-circle-right";
} else {
allowadd = 'rel="tooltip" title="click here to add to the selected group"';
icon = "fas fa-arrow-alt-circle-right";
}
if ( obj.group_id == 0 ) {
group = '<button ' + allowadd + ' class="btn btn-link btn-xs guestselect ' + gn + ' " id="' + gnid + '" type="button" onClick="addtogroup(' + obj.account_id + ');"><i class="' + icon + ' fa-2x"></i></button>';
nomembership = ""; // ""bg-success text-white";
} else {
group = ' ';
nomembership = "";
}
if ( email == "" )
email = " ";
list += '<a href="#" class="list-group-item list-group-item-action p-1 pl-2 guestselect clearfix ' + gn + ' ' + nomembership + '" onClick="displayguestinfo(' + obj.account_id + ');">' + obj.account_firstname + " " + obj.account_lastname;
list += '<span class="float-right">' + group + '</span><br><small>' + email + '</small></a>';
} )
$( '#guestslist' ).html( list );
var count = data.count + '/' + data.totalguests
$( '#guestcount' ).html( count );
account_id = $( '.account_id' ).val();
var gn = "gn" + account_id;
$( '.guestselect' ).removeClass( "list-group-item-primary" );
$( '.' + gn ).addClass( "list-group-item-primary" );
}
} )
}
}
此代码创建一小组来宾（即在一张桌子上的IE来宾组。）从此列表中选择一个来宾时，第一个列表将自动滚动。
function displaygroupguests() {
var row, name, guests, fields, guestcount, fullname;
$( '.groupselect' ).removeClass( "list-group-item-primary" );
var gm = "gm" + group_id;
$( '#' + gm ).addClass( "list-group-item-primary" );
$.ajax( {
type: 'POST',
dataType: "json",
url: "ajaxphp/group_functions.php",
data: {
group_id: group_id,
function: 'groupguests'
},
success: function ( data ) {
guests = data.guests;
fields = data.groupfields;
if ( data.group_maxguests > data.guestcount )
group_full = false;
else
group_full = true;
var c = 0,
icon = '',
fullname = '',
checkin = 'href="#"',
checkintitle = "Click here to manually check-in this guest.",
checkouttitle = "Click here to remove guest check-in.";
if ( data.allowcheckin != "true" ) {
checkin = "";
checkintitle = checkouttitle = "Checking Toggle. This feature is only available during the event.";
}
row = '';
$.each( guests, function ( key, value ) {
c++;
console.log( value );
gn = 'gn' + value.account_id;
fullname = "'" + value.account_firstname + " " + value.account_lastname + "'";
name = value.account_firstname + " " + value.account_lastname;
if ( value.arrival == "N/A" )
icon = '<span class="float-right">' + value.arrival + '<button class="btn btn-link btn-sm" rel="tooltip" title="' + checkintitle + '" onClick="togglearrival(1, ' + value.account_id + ',' + fullname + ');"><i class="far fa-square"></i></button></span>';
else
icon = '<span class="float-right">' + value.arrival + '<button class="btn btn-link btn-sm" rel="tooltip" title="' + checkouttitle + '" onClick="togglearrival(0,' + value.account_id + ',' + fullname + ');"><i class="far fa-check-square" style="color:green"></i></button></span>';
if ( data.allowcheckin !== "past" ) {
// icon += '<button class="btn btn-link btn-xs" rel="tooltip" title="Click here to remove this guest from the group." onClick="removefromgroup(' + value.groupmember_id + ',' + value.group_id + ',' + value.account_id + ');"><i class="icon-fixed-width fas fa-times removeguest"></i></button>';
//icon += '<button class="btn btn-link btn-xs" rel="tooltip" title="Edit Guest" onClick="editeventguest(' + value.account_id + ');"> <i class="fas fa-pencil-alt"></i></button>';
}
row += '<a href="#" class="list-group-item list-group-item-action p-1 clearfix ' + gn + '" onClick="displayguestinfo(' + value.account_id + ');">' + name + ' ' + icon + '</a>';
} );
var diff = data.max - data.guestcount;
for ( var i = 0; i < diff; i++ ) {
c++;
row += '<a href="#" class="list-group-item list-group-item-action p-1 clearfix ' + gn + '"><button class="btn btn-primary btn-sm" role="button" onClick="addnewguest(1);">Add New Guest</button></a>';
}
$( '#groupguests' ).html( row );
if ( diff === 0 )
group_full = true;
else
group_full = false;
shownnonassignedguests();
$( '#groupname' ).html( data.name );
if ( data.organizer == "not assigned" )
fullname = data.organizer
else
fullname = data.organizer.account_firstname + " " + data.organizer.account_lastname;
row = "Group Organizer: <strong>" + fullname + "</strong><br>";
if ( data.fieldcount > 0 ) {
$.each( fields, function ( key, value ) {
var tempval = "'" + value.value + "'";
row += '<span>' + value.field_name + ' <a href="#" onClick="viewcustomfieldgroup(' + tempval + ');">' + value.value + '</a></span><br>';
} );
} else
row += 'Custom field not assigned.';
$( '#groupinformation' ).html( row );
$( '#searchInput' ).val( '' ).focus();
}
} );
}
我希望所有来宾的主列表滚动到该群组中选择的来宾。选择访客时，背景颜色会更改，但不会滚动。我希望我能提供足够的信息。