【发布时间】：2023-03-20 10:38:01
【问题描述】：
更新 我有一个 jsfiddle 在这里显示问题：http://jsfiddle.net/waf11s6u/1/ 当您在搜索栏中输入字母时，附加到 div 的自定义滚动条消失。滚动条可能会被从 div 中淡出不匹配单词的代码淡出？
~~
我正在为 Facebook 游戏创建一个自定义的多好友选择器，它看起来类似于：http://tinyurl.com/gus79cf 用户可以在搜索栏中键入，任何匹配的朋友姓名都会出现在下面的区域中。 我正在使用自定义滚动条插件来设计滚动条以向下滚动浏览朋友列表。 这是插件的网站：http://manos.malihu.gr/jquery-custom-content-scroller/
从视觉上看，滚动条由两部分组成，第一部分是轨道（我已经在背景图像上绘制了轨道，所以它实际上不是 Javascript 代码的一部分），第二部分是图标，图标是沿着轨道上下移动的小图像。
滚动条完美运行（意味着图标可以正确上下滑动），除了一件事，每当用户在搜索栏中输入字母时，图标就会消失，并且只有在搜索栏为空时才会再次可见.
包含朋友的姓名和图像的 div 是在 Javascript 中动态创建的（称为“mfsForm”）。当用户开始输入姓名时，我有一些 Javascript 会淡出不匹配的朋友姓名和图像。
我认为这段代码也导致图标消失。
这是有问题的代码：
// Earlier code here connects to Facebook's API.
// Then get the list of friends for this user with the Graph API
FB.api('/me/invitable_friends?limit=48', function(response) {
var container = document.getElementById('mfs');
// Creating the div "mfsForm" (this will hold the friend names & photos, and is also what the custom scrollbar is applied to.)
var mfsForm = document.createElement('form');
mfsForm.id = 'mfsForm';
mfsForm.className = " mCustomScrollbar mfsForm";
// Iterate through the array of friends object and create a checkbox for each one.
for (var i = 0; i < response.data.length; i++) { //Math.min(response.data.length, 10)
var friendItem = document.createElement('div');
friendItem.id = 'friend_' + response.data[i].id;
friendItem.style.cssText="width:100px; height:100px; padding:7px; color:#FFF;"
friendItem.style.cssFloat="left";
friendItem.innerHTML = '<input type="checkbox" name="friends" value="' + response.data[i].id + '" />';
var img = document.createElement('img');
img.src = response.data[i].picture.data.url;
img.style.cssText = 'width: 70px;height: 70px;'
friendItem.appendChild(img);
var labelName = document.createElement('label');
labelName.style.cssText = 'font-size: 14px;'
labelName.innerHTML = response.data[i].name;
friendItem.appendChild(labelName);
mfsForm.appendChild(friendItem);
}
container.appendChild(mfsForm);
console.log(mfsForm);
$(mfsForm).mCustomScrollbar();
// Create a button to send the Request(s)
var sendButton = document.createElement('div');
sendButton.id = 'sendButton';
sendButton.onclick = sendRequest;
container.appendChild(sendButton);
$("#filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val()//, count = 0;
// Loop through the comment list
$("#mfsForm div").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut("slow");
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
//Attempting to fade in the icon here:
$(this).next('.mCSB_dragger_bar').fadeIn("slow");
}
});
})
});
我认为$(this).fadeOut("slow"); 正在使滚动条图标淡出。我试图通过引用其类（mCSB_dragger_bar）并将其淡入此处来定位图标：
$(this).next('.mCSB_dragger_bar').fadeIn("slow"); 但它不起作用。
对于我可以尝试解决此问题的任何帮助或建议将不胜感激，在此先感谢您！
【问题讨论】：
-
一个 jsFiddle，也许？
-
嗨@rac 感谢您的回复，我现在将着手制作一个 jsfiddle，我可能需要一些时间才能让它工作，但我会在完成时通知您。跨度>
-
你好@rac我在这里有这个小提琴：jsfiddle.net/waf11s6u/1绿色框内的区域是列出朋友的地方，对于这个例子，我只是把示例文本放在那里（因为我无法显示来自 facebook 的朋友）。如您所见，该框附加了一个自定义滚动条。如果您在搜索栏中输入“T”，则滚动条会淡出，如果您继续输入“Th”，则文本将保留，因为它与框中的内容相匹配，但如果您输入“Thz”，则示例文本将消失.
-
@rac 这意味着搜索栏工作正常，如果您清除搜索栏，则滚动条将重新出现。测试时您可能需要多次单击“运行”，因为在使用 jsfiddle 上的搜索栏进行测试时，我注意到一些不一致的结果，但我认为这可能取决于他们的界面。
-
@rac 我认为滚动条可能会被应该检查搜索栏输入并淡出不匹配单词的相同代码淡出，如果是这种情况，那么我不确定如何解决这个问题，在此先感谢您查看此问题。
标签： javascript jquery html css mcustomscrollbar