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

Question

更新我有一個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"); 但它不起作用。

非常感謝您對我可以嘗試解決此問題的任何幫助或建議，在此先感謝您！

Answer 1

問題是什么？ 您沒有顯示正常的代碼來查看腳本刪除圖標的位置，我可以說您強迫腳本顯示此圖標。 輸入代碼onchange="f()"或onkey或其他。 和

<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).find('.mCSB_dragger_bar').fadeIn("slow"); 不是$(this).next('.mCSB_dragger_bar').fadeIn("slow");

如果在$（this）元素上存在類名稱為mCSB_dragger_bar元素（$ this-> $（“＃mfsForm div”）-> id為mfsForm的div元素），它將找到並顯示；

NEXT僅在$ this之后返回一個元素，可能在$（this）和mCSB_dragger_bar存在另一元素。

也嘗試$(this).parent().find('.mCSB_dragger_bar').fadeIn("slow"); 如果mCSB_dragger_bar和$（this）在同一個毀滅級別