Question

更新我有一个jsfiddle在这里显示问题：http://jsfiddle.net/waf11s6u/1/当你在搜索栏中输入一个字母时，附加到div的自定义滚动条消失了。滚动条可能会被淡化掉div中不匹配单词的代码淡出？

~~

我正在为Facebook游戏创建一个自定义多友情选择器，它看起来与此类似：http://tinyurl.com/gus79cf 用户可以键入搜索栏，任何匹配的朋友名称将显示在下面的区域中。我正在使用自定义滚动条插件来设计滚动条以向下滚动浏览朋友列表。这是该插件的网站：http://manos.malihu.gr/jquery-custom-content-scroller/

视觉上滚动条由两部分组成，第一部分是轨道（我将轨道绘制到背景图像上，所以它实际上不是Javascript代码的一部分），第二部分是图标， icon是沿着轨道上下移动的小图像。

滚动条工作正常（意味着图标正确地上下滑动），除了一件事，每当用户在搜索栏中键入一个字母时图标消失，只有当搜索栏为空时它才会再次显示

包含姓名＆amp;朋友的图像是在Javascript中动态创建的（它被称为“mfsForm”）。当用户开始输入名称时，我会使用一些Javascript来淡出不匹配的朋友姓名＆amp;图片。

我认为这段代码也会导致图标消失。

这是有问题的代码：

  // 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");但它不起作用。

对于我可以尝试解决此问题的任何帮助或建议将非常感谢，提前谢谢！

Answer 1

有什么问题？您没有显示正常代码以查看脚本删除图标的位置，我可以说您强制脚本显示此图标。输入代码onchange="f()"或onkey pres或其他。和

<script>
function f(){ //$('#icon') the element witch contain icon that disapear
$('#icon').css('visibility','visible').css('display','block');
$('#icon').attr('background','url('/icon.png')')}`
/*$('#parent-of-icon').appendChild(icon );*/

其他依赖于图标消失的原因可能是你的脚本删除图标（html元素）然后创建它。

在此模式下，每次按键都会显示图标。

Answer 2

尝试$(this).next('.mCSB_dragger_bar').fadeIn("slow");而非mCSB_dragger_bar

如果$（this）元素上存在类名为mCSB_dragger_bar的元素（$ this - ＆gt; $（“＃mfsForm div”） - ＆gt;在id = mfsForm的元素上有一些div）它会找到它并显示;

NEXT在$ this之后只返回一个元素，可能在$（this）和$(this).parent().find('.mCSB_dragger_bar').fadeIn("slow");之间存在另一个元素。

如果mCSB_dragger_bar和$（this）处于相同的死命级别，请尝试{ "meta": { "limit": 15, "next": "/abc/api/defapi/lkk/?username=abc&api_key=xyz&limit=15&offset=60&format=json", "offset": 30, "previous": "/abc/api/defapi/lkk/?username=abc&api_key=xyz&limit=15&offset=30&format=json", "total_count": 312213 }, "objects": [ { "availability": "COMPLETE", "confidentiality": "", "cpe_id": [ { "name": "cpe:/o:sun:sunos:5.11::express" } NOTE:truncated for brevity

如何使用Javascript停止淡出HTML元素？

2 个答案: