2013-08-06 33 views
1

我有一串可以添加到另一個ul以形成播放列表的歌曲。 但是我不希望同樣的歌曲添加兩次我通過jQuery的這樣做,但不能讓我想在這裏是結果的http://jsfiddle.net/mcaJS/這裏是我的代碼:不會向播放列表添加重複項

HTML

<h1>Playlist Mania</h1> 

<form> 
    <input type="text" id="containsContent"> 
    <input type="button" value="Filter" id="filterButton"> 
    <input type="button" value="Add to Playlist" id="addButton"> 
    <input type="button" value="Clear" id="clearButton"> 

<h2>Selected Songs</h2> 

    <ul id="playlist"></ul> 

<h2>Albums to choose from</h2> 

    <div class="album"> 
     <h3>The Dark Side of the Moon</h3> 

     <h4>Pink Floyd</h4> 

     <ol> 
      <li> 
       <input type="checkbox"><a href="http://en.wikipedia.org/wiki/Speak_to_Me" data- length="1:30">Speak to Me</a> 
      </li> 
      <li> 
       <input type="checkbox"><a href="http://en.wikipedia.org/wiki/Breathe_(Pink_Floyd_song)" data- length="2:43">Breathe</a> 
      </li> 
      <li> 
       <input type="checkbox"><a data-length="3:36">On the Run</a> 
      </li> 
      <li> 
       <input type="checkbox"><a data-length="7:01">Time</a> 
      </li> 
      <li> 
       <input type="checkbox"><a href="http://en.wikipedia.org/wiki/The_Great_Gig_in_the_Sky" data-length="4:36">The Great Gig in the Sky</a> 
      </li> 
      <li> 
       <input type="checkbox"><a data-length="6:22">Money</a> 
      </li> 
      <li> 
       <input type="checkbox"><a data-length="7:46">Us and Them</a> 
      </li> 
      <li> 
       <input type="checkbox"><a data-length="3:25">Any Colour You Like</a> 
      </li> 
      <li> 
       <input type="checkbox"><a href="http://en.wikipedia.org/wiki/Brain_Damage_(song)" data-length="3:48">Brain Damage</a> 
      </li> 
      <li> 
       <input type="checkbox"><a data-length="2:03">Eclipse</a> 
      </li> 
      <ol> 
    </div> 
</form> 
</body> 

</html> 

JS

$("document").ready(function() { 
    $("input#filterButton").click(filterContentAndCheck); 
    $("input#clearButton").click(clearAll); 
    $("input#addButton").click(addToPlaylist); 
}); 
var clearAll = function() { 
    $("*").removeClass("highlight"); 
    $("form").get(0).reset(); 
    $("form input:checked").attr("checked", false); 
}; 
var filterContentAndCheck = function() { 
    var lookFor = $("input#containsContent").val(); 
    clearAll(); 
    $("li a:contains('" + lookFor + "')").parent().addClass("highlight"); 
    $("li.highlight input:checkbox").attr("checked", true); 
}; 

var addToPlaylist = function() { 
    $("form input:checked").parent().each(function() { 
     var song = $(this).text(); 
     var contains = $("ul#playlist li:contains()"); 
     console.log(contains); 
     if (contains > 0) { 
      alert("do not add"); 
     } else { 
      $("ul#playlist").append("<li>" + song + "</li>"); 
     } 
    }); 
}; 

回答

0
var contains = $("ul#playlist li:contains()"); 

應該爲b e

var contains = $("ul#playlist li:contains(" + song + ")"); 

否則,您可以有一個數組並在添加到播放列表時推送歌曲。在將其添加到播放列表之前,先檢查數組。

而且你的條件應該檢查​​的contains

if (contains> 0) { 

應該長度是

if (contains.length > 0) { 

Check Fiddle

+0

非常感謝我被加入。長度()將包含變量不是if語句再次感謝你! –

+0

@RodrigoLessa ..很高興有幫助:) –

相關問題