2016-12-10 5 views
0

フィルタリストが空の場合、背景を1つの色に変更する方法はありますか?ただし、リストに何かがある場合は、同じままにしておきます。何かを濾過し、まだ​​表示されている場合、背景が同じに留まるように、しかし、フィルタリストは、背景を変更するために何かを見つけることができないとき、私は方法を探していリストが空のときだけ背景を変更してください

$('#myInput').keyup(function(e) { 
 
\t if(e.keyCode == 13){ 
 
\t \t mySearch(); 
 
\t \t Check(); 
 
\t } 
 
}); 
 
\t \t 
 
function myInput() { 
 
\t var empt = document.getElementById("myInput").value; 
 
\t if (empt == "") 
 
\t { 
 
\t \t mySearch(); 
 
\t \t return false; 
 
\t } 
 
\t else 
 
\t { 
 
\t \t return true; 
 
\t } 
 
} 
 
\t \t 
 
function mySearch() { 
 
\t var input, filter, ul, li, a, i; 
 
\t input = document.getElementById("myInput"); 
 
\t filter = input.value.toUpperCase(); 
 
\t ul = document.getElementById("myUl"); 
 
\t li = ul.getElementsByTagName("a"); 
 
\t for (tag = 0; tag < li.length; tag++) { 
 
\t \t a = li[tag].getElementsByTagName("p")[0]; 
 
\t \t if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
 
\t \t \t \t \t li[tag].style.display = ""; 
 
\t \t } else { 
 
\t \t \t li[tag].style.display = "none"; 
 
\t \t } 
 
\t } 
 
}
#listentry { 
 
\t width: 280px; 
 
\t height: 150px; 
 
\t color: #999; 
 
\t float: left; 
 
\t margin: 5px; 
 
\t background-color: #1d1d1d; 
 
\t box-shadow: 5px 5px 5px #0d0d0d; 
 
\t border-bottom-left-radius: 6px; 
 
\t border-top-left-radius: 6px; 
 
} \t 
 
#listentry:hover { 
 
\t background-color: #222; 
 
\t color: #999; 
 
\t cursor: pointer; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Page Title</title> 
 
</head> 
 
<body> 
 
<input type="text" id="myInput" onkeyup="myInput()" placeholder="Search..."> 
 
<div id="myUl"> 
 
    <a href="#indexModal" id="entry"> 
 
\t <article id="listentry"> 
 
\t \t <img src="Images/index.png" id="img1" style="float: left; width: 105px; height: 150px;"> 
 
\t \t <article id="desc"> 
 
\t \t \t <center> 
 
\t \t \t \t <p id="title">A Certain Magical Index</p> 
 
\t \t \t \t <p id="rating">TV-MA</p> 
 
\t \t \t </center> 
 
\t \t </article> 
 
\t </article> 
 
    </a> 
 
    <a href="#index2Modal"> 
 
\t <article id="listentry"> 
 
\t  <img src="Images/index2.png" id="img1" style="float: left; width: 105px; height: 150px;"> 
 
\t  <article id="desc"> 
 
\t \t \t <center> 
 
\t \t \t \t <p id="title4">A Certain Magical Index: The Miracle of Endymion</p> 
 
\t \t \t \t <p id="rating">TV-MA</p> 
 
\t \t \t </center> 
 
\t \t </article> 
 
\t </article> 
 
    </a> 
 
    <a href="#railgunModal"> 
 
\t <article id="listentry"> 
 
\t  <img src="Images/railgun.png" id="img1" style="float: left; width: 104px; height: 150px;"> 
 
\t \t <article id="desc"> 
 
\t \t \t <center> 
 
\t \t \t \t <p id="title">A Certain Scientific Railgun</p> 
 
\t \t \t \t <p id="rating">TV-14</p> 
 
\t \t \t </center> 
 
\t \t </article> 
 
\t </article> 
 
    </a> 
 
</div> 
 
</body> 
 
</html>

。 ありがとう!

答えて

0

あなたの値を確認するためにあなたのリストをスキャンする条件文を試してみることができます。リストが空白の場合は、背景色を変更することができます。

count = 0   //initializes a variable to count the number of items in the list 
for(var x in list){ //Loops through your "list" to find items 
    count += 1;  //If an item is found, the variable count increments 
} 
if(count < 1){  //If there is NOT any items in your list (empty)... 
    document.body.style.backgroundColor = "red"; //Then change the background color 
} 
else{ 
    <!--pass--> //Do what you like. 
} 

これはあなたの探しているものです。

関連する問題