複製按鈕列表

Question

在我製作的網頁上，我在索引中有一個滑塊，並帶有一個按鈕列表。 製作標題時，使用另一個菜單列表，它追加滑塊上的按鈕。

我顯然要刪除頂部的點，並試圖幾件事，沒有結果。 有耐心發現錯誤的人的榮譽。

/* Menu */ 
 

 
#menu { 
 
    width: 100%; 
 
    margin-left: 10%; 
 
    margin-right: 10%; 
 
    margin-bottom: 20px; 
 
} 
 
#menu_names { 
 
    list-style-type: none; 
 
    width: 100%; 
 
} 
 
.menu_button { 
 
    float: left; 
 
    width: 8em; 
 
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif; 
 
    font-size: 14px; 
 
    background-color: #FFF; 
 
    color: #000; 
 
    padding: 0.2em 0.6em; 
 
    border-bottom: 3px solid #000; 
 
} 
 
.menu_button:hover { 
 
    float: left; 
 
    width: 8em; 
 
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif; 
 
    font-size: 14px; 
 
    background-color: #000; 
 
    color: #FFF; 
 
    padding: 0.2em 0.6em; 
 
    border-bottom: 3px solid #3CC; 
 
} 
 
.carousel-buttons-container { 
 
    width: 600px; 
 
    margin-top: 15px; 
 
    margin-left: 45%; 
 
    position: relative; 
 
    padding: 0; 
 
    display: inline-block; 
 
} 
 
.carousel-buttons-container carousel-list { 
 
    list-style-type: none; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    display: inline-block; 
 
} 
 
.carousel-buttons { 
 
    background-color: #000; 
 
    height: 18px; 
 
    width: 18px; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    margin: 0 10px 0 0; 
 
    padding: 0; 
 
    cursor: pointer; 
 
} 
 
.carousel-buttons:last-of-type { 
 
    margin: 0 auto; 
 
}

<!-- Menu --> 
 

 
<div id="menu"> 
 
    <ul id="menu_names"> 
 
    <li class="menu_button">WOMEN</li> 
 
    <li class="menu_button">JUNIOR</li> 
 
    <li class="menu_button">ACCESSORIES</li> 
 
    <li class="menu_button">COLLECTIONS</li> 
 
    <li class="menu_button">SALE</li> 
 
    <li class="menu_button">MY ACCOUNT</li> 
 
    </ul> 
 
</div> 
 

 
<!-- Slider --> 
 

 
<div id="index_container"> 
 
    <div id="image_slide"> 
 
    <div class="carousel-container"> 
 
     <div class="left-arrow"></div> 
 
     <div class="right-arrow"></div> 
 
     <div class="carousel-image-holder"> 
 
     <img src="images/bg.jpg" /> 
 
     <img src="images/bg.jpg" /> 
 
     <img src="images/bg.jpg" /> 
 
     <img src="images/bg.jpg" /> 
 
     <img src="images/bg.jpg" /> 
 
     </div> 
 
    </div> 
 
    <div class="clear"></div> 
 
    <div class="carousel-buttons-container"> 
 
     <ul class="carousel-list"> 
 

 
     </ul> 
 
    </div>

的JavaScript

<script> 
    $(".left-arrow").hide(); 
var numImgs = $('div.carousel-image-holder img').length; 

var addId = numImgs; 



if(numImgs == 2){  
    var clicked = 0; 
    imgCount = numImgs-2; 
}else if(numImgs <= 1){ 
    $(".right-arrow").hide();  
}else{ 
    var clicked = 1;   
    imgCount = numImgs-1; 
} 
    if(numImgs > 2){ 
for (var i=0; i<numImgs; i++){ 
    $("ul").prepend('<li class="carousel-buttons" id="carousel'+addId+'"></li>'); 
    var addId = addId - 1; 
} 
}else{ 

} 


$(".carousel-buttons").click(function(){ 

var findIdClicked = $(this).attr("id"); 

var splitString = findIdClicked.split("carousel") 
var findTheNumb = splitString[1]; 

$(".carousel-buttons").removeClass("active"); 
$(this).addClass("active"); 
clicked = parseInt(findTheNumb); 
var adjustNumberforSlide = findTheNumb-1; 

$(".carousel-image-holder").animate({"left": -(600*adjustNumberforSlide)+"px"});  
console.log(clicked); 

if(findTheNumb == 1){ 
    $(".left-arrow").hide(); 
    $(".right-arrow").show(); 
}else if (findTheNumb == numImgs){ 
    $(".right-arrow").hide(); 
    $(".left-arrow").show(); 
}else{ 
    $(".right-arrow").show(); 
    $(".left-arrow").show(); 
} 
}); 


$(".carousel-buttons-container").find("carousel-buttons").first().addClass("active"); 


    $(".right-arrow").click(function(){ 

    if (clicked < imgCount){ 

    $(".carousel-image-holder").animate({"left": "-=600px"}); 


     console.log(clicked); 
    }else{ 
    $(".carousel-image-holder").animate({"left": "-=600px"}); 
    $(".right-arrow").hide(); 

     console.log(clicked); 
    } 

    clicked = clicked+1; 
    $(".left-arrow").show(); 
    $(".carousel-buttons").removeClass("active"); 
    $("#carousel"+clicked).addClass("active"); 

    }); 

    $(".left-arrow").click(function(){ 

    if (clicked > 2){ 

    $(".carousel-image-holder").animate({"left": "+=600px"}); 

     console.log(clicked); 
    }else{ 
    $(".carousel-image-holder").animate({"left": "+=600px"}); 
    $(".left-arrow").hide(); 

     console.log(clicked); 
    } 

    $(".right-arrow").show(); 
    clicked = clicked-1; 
    $(".carousel-buttons").removeClass("active"); 
    $("#carousel"+clicked).addClass("active"); 


    }); 
    </script> 

CODE： http://jsfiddle.net/k5gvk15g/

Answer 1

改變這一行：

$("ul").prepend('<li class="carousel-buttons" id="carousel'+addId+'"></li>'); 

要這樣：

$("ul.carousel-list").prepend('<li class="carousel-buttons" id="carousel'+addId+'"></li>'); 

正在發生的事情是，第一行是添加按鈕，每一個UI元素。你只想把它添加到一個特定的ul元素。