小贝子编程

jQuery没有为每个div处理幻灯片



我有一个项目，我正试图为每个容器制作一个上下切换的jQuery幻灯片，但在操作时使用相同的id。

不幸的是，它只适用于第一个容器。我只剩下9个类似的容器，但我需要一个函数来调用每个div

$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
#panel, #flip {
padding:10px;
text-align: center;
background-color: #38ada9;
border: solid 1px #c3c3c3;
border-radius: 25px;
}
#panel {
display: none;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Proiect -Website-</title>
<!---Boostrap Ver 3.3.7 --->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!---J-Query ---> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--- Animation Ajax --->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<!---- NUMARUL 10 ----->
<div class="container-fluid">
<div class="col-sm-6 col-md-offset-3">
<h2 id="primul" style="color:darkmagenta;"> 10. Samsung S9+ </h2>
<div class="thumbnail">
<img src="telefoane/s9.jpg" alt="Samsung S9+">
<!-- Thin Size Progress Bars -->
<div class="margin">
<h3 class="progress-label">Rapiditate
<span class="pull-right">85%</span>
</h3>
<div class="progress progress-xxs" style="height:12px;">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" id="first" aria-valuemax="100" style="width: 92%">
</div>
</div>
<h3 class="progress-label">Rezistenta
<span class="pull-right">68%</span>
</h3>
<div class="progress progress-xxs" style="height:12px;">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="68" aria-valuemin="0" id="second" aria-valuemax="100" style="width: 68%;">
</div>
</div>
<h3 class="progress-label">Performanta
<span class="pull-right">81%</span>
</h3>
<div class="progress progress-xxs" style="height:12px;">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="78" aria-valuemin="0" id="third" aria-valuemax="100" style="width: 78%">
</div>
</div>
</div>
<!-- End Thin Size Progress Bars -->
<div class="caption">
<h3 style="color:#c0392b;text-align:center;padding-bottom:16px;">Caracteristici: <i class="fa fa-mobile"></i></h3>  



<!------ THIS IS THE JQUERY SLIDE ---------->
<div id="flip">Apasa pentru detalii</div>       
<div id="panel">


<p class="text-bold">Display Super AMOLED</p><p>6.2 inch cu rezoluție 2960×1440 pixeli, aspect 18.5:9, 529 ppi, protejat cu sticlă Corning Gorilla Glass 5, 3D Touch pentru butonul de Home, certificare IP68 în ce privește contactul cu apa și praful, raport display / corp de 84.2%;</p>
<p class="text-bold">Procesor Exynos 9810 Octa</p><p> 4 x Mongoose M3 la 2.8 GHz și 4 x ARM Cortex-A55 la 1.7 GHz și Mali-G72 MP18 sau Qualcomm Snapdragon 845 de tip octa-core cu 4 x Kryo 385 la 2.7 GHz și 4 x Kryo 385 Silver la 1.7 GHz, 6 GB RAM și 64 / 128 / 256 GB spațiu de stocare, slot pentru cardurile microSD de până la 400 GB;</p>
<p class="text-bold">Android 8.0 Oreo</p>
<p>4G cu viteze de până la 1200 Mbps în download și 200 Mbps în upload, Wi-Fi a/b/g/n/ac, dual-band, Wi-Fi direct, hotspot, bluetooth 5.0, USB type-C, NFC, jack de 3.5 mm, A-GPS, GLONASS, BDS și GALILEO;</p>
<p class="text-bold">Camera</p>
<p>12 Megapixeli cu f/1.5 sau 2.4, dimensiune a pixelului de 1.4 microni + 12 Megapixeli cu f.2.4, zoom optic 2x, Dual Pixel PDAF, detecție de fază pentru autofocus, OIS, LED flash, filmează la 2160p cu 30 fps, filmează la 720p cu 960 fps, cameră frontală de 8 Megapixeli cu f/1.6 ce filmează la 1440p;</p>
<p class="text-bold">Baterie</p>
<p>3500 mAh, 189 gr. și dimensiuni de 158.1 x 73.8 x 8.5 mm grosime.</p>
<p class="text-bold" style="font-size:14px;">Pret: 600<i class="fa fa-eur"></i></p>
<div align="right">
<div class="button">
<a href="https://www.gsmarena.com/samsung_galaxy_s9+-8967.php" class="btn btn-one"> Mai multe </a></div>    
</div>
</div>
</div>
</div>
</div>   
</div>

<!---- NUMARUL 9 ----->
<div class="container-fluid">
<div class="col-sm-6 col-md-offset-3">
<h2 id="primul" style="color:darkmagenta;"> 10. Samsung S9+ </h2>
<div class="thumbnail">
<img src="telefoane/s9.jpg" alt="Samsung S9+">
<!-- Thin Size Progress Bars -->
<div class="margin">
<h3 class="progress-label">Rapiditate
<span class="pull-right">85%</span>
</h3>
<div class="progress progress-xxs" style="height:12px;">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" id="first" aria-valuemax="100" style="width: 92%">
</div>
</div>
<h3 class="progress-label">Rezistenta
<span class="pull-right">68%</span>
</h3>
<div class="progress progress-xxs" style="height:12px;">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="68" aria-valuemin="0" id="second" aria-valuemax="100" style="width: 68%;">
</div>
</div>
<h3 class="progress-label">Performanta
<span class="pull-right">81%</span>
</h3>
<div class="progress progress-xxs" style="height:12px;">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="78" aria-valuemin="0" id="third" aria-valuemax="100" style="width: 78%">
</div>
</div>
</div>
<!-- End Thin Size Progress Bars -->
<div class="caption">
<h3 style="color:#c0392b;text-align:center;padding-bottom:16px;">Caracteristici: <i class="fa fa-mobile"></i></h3>  
<div id="flip">Apasa pentru detalii</div>
<div id="panel">
<p class="text-bold">Display Super AMOLED</p><p>6.2 inch cu rezoluție 2960×1440 pixeli, aspect 18.5:9, 529 ppi, protejat cu sticlă Corning Gorilla Glass 5, 3D Touch pentru butonul de Home, certificare IP68 în ce privește contactul cu apa și praful, raport display / corp de 84.2%;</p>
<p class="text-bold">Procesor Exynos 9810 Octa</p><p> 4 x Mongoose M3 la 2.8 GHz și 4 x ARM Cortex-A55 la 1.7 GHz și Mali-G72 MP18 sau Qualcomm Snapdragon 845 de tip octa-core cu 4 x Kryo 385 la 2.7 GHz și 4 x Kryo 385 Silver la 1.7 GHz, 6 GB RAM și 64 / 128 / 256 GB spațiu de stocare, slot pentru cardurile microSD de până la 400 GB;</p>
<p class="text-bold">Android 8.0 Oreo</p>
<p>4G cu viteze de până la 1200 Mbps în download și 200 Mbps în upload, Wi-Fi a/b/g/n/ac, dual-band, Wi-Fi direct, hotspot, bluetooth 5.0, USB type-C, NFC, jack de 3.5 mm, A-GPS, GLONASS, BDS și GALILEO;</p>
<p class="text-bold">Camera</p>
<p>12 Megapixeli cu f/1.5 sau 2.4, dimensiune a pixelului de 1.4 microni + 12 Megapixeli cu f.2.4, zoom optic 2x, Dual Pixel PDAF, detecție de fază pentru autofocus, OIS, LED flash, filmează la 2160p cu 30 fps, filmează la 720p cu 960 fps, cameră frontală de 8 Megapixeli cu f/1.6 ce filmează la 1440p;</p>
<p class="text-bold">Baterie</p>
<p>3500 mAh, 189 gr. și dimensiuni de 158.1 x 73.8 x 8.5 mm grosime.</p>
<p class="text-bold" style="font-size:14px;">Pret: 600<i class="fa fa-eur"></i></p>
<div align="right">
<div class="button">
<a href="https://www.gsmarena.com/samsung_galaxy_s9+-8967.php" class="btn btn-one"> Mai multe </a></div>    
</div>
</div>
</div>
</div>
</div>   
</div>

添加的代码片段

$(document).ready(function() {
$(".flip").click(function() {
var divs = $(this).next("div.panel");
divs.slideToggle("slow");
});
});
.panel,
.flip {
padding: 10px;
text-align: center;
background-color: #38ada9;
border: solid 1px #c3c3c3;
border-radius: 25px;
}
.panel {
display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!---J-Query --->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--- Animation Ajax --->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<!---- NUMARUL 10 ----->
<div class="container-fluid">
<div class="col-sm-6 col-md-offset-3">
<h2 id="primul" style="color:darkmagenta;"> 10. Samsung S9+ </h2>
<div class="thumbnail">
<img src="telefoane/s9.jpg" alt="Samsung S9+">
<!-- Thin Size Progress Bars -->
<div class="margin">
<h3 class="progress-label">Rapiditate
<span class="pull-right">85%</span>
</h3>
<div class="progress progress-xxs" style="height:12px;">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" id="first" aria-valuemax="100" style="width: 92%">
</div>
</div>
<h3 class="progress-label">Rezistenta
<span class="pull-right">68%</span>
</h3>
<div class="progress progress-xxs" style="height:12px;">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="68" aria-valuemin="0" id="second" aria-valuemax="100" style="width: 68%;">
</div>
</div>
<h3 class="progress-label">Performanta
<span class="pull-right">81%</span>
</h3>
<div class="progress progress-xxs" style="height:12px;">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="78" aria-valuemin="0" id="third" aria-valuemax="100" style="width: 78%">
</div>
</div>
</div>
<!-- End Thin Size Progress Bars -->
<div class="caption">
<h3 style="color:#c0392b;text-align:center;padding-bottom:16px;">Caracteristici: <i class="fa fa-mobile"></i></h3>
<!------ THIS IS THE JQUERY SLIDE ---------->
<div class="flip">Apasa pentru detalii</div>
<div class="panel">
<p class="text-bold">Display Super AMOLED</p>
<p>6.2 inch cu rezoluție 2960×1440 pixeli, aspect 18.5:9, 529 ppi, protejat cu sticlă Corning Gorilla Glass 5, 3D Touch pentru butonul de Home, certificare IP68 în ce privește contactul cu apa și praful, raport display / corp de 84.2%;</p>
<p class="text-bold">Procesor Exynos 9810 Octa</p>
<p> 4 x Mongoose M3 la 2.8 GHz și 4 x ARM Cortex-A55 la 1.7 GHz și Mali-G72 MP18 sau Qualcomm Snapdragon 845 de tip octa-core cu 4 x Kryo 385 la 2.7 GHz și 4 x Kryo 385 Silver la 1.7 GHz, 6 GB RAM și 64 / 128 / 256 GB spațiu de stocare, slot pentru
cardurile microSD de până la 400 GB;</p>
<p class="text-bold">Android 8.0 Oreo</p>
<p>4G cu viteze de până la 1200 Mbps în download și 200 Mbps în upload, Wi-Fi a/b/g/n/ac, dual-band, Wi-Fi direct, hotspot, bluetooth 5.0, USB type-C, NFC, jack de 3.5 mm, A-GPS, GLONASS, BDS și GALILEO;</p>
<p class="text-bold">Camera</p>
<p>12 Megapixeli cu f/1.5 sau 2.4, dimensiune a pixelului de 1.4 microni + 12 Megapixeli cu f.2.4, zoom optic 2x, Dual Pixel PDAF, detecție de fază pentru autofocus, OIS, LED flash, filmează la 2160p cu 30 fps, filmează la 720p cu 960 fps, cameră
frontală de 8 Megapixeli cu f/1.6 ce filmează la 1440p;</p>
<p class="text-bold">Baterie</p>
<p>3500 mAh, 189 gr. și dimensiuni de 158.1 x 73.8 x 8.5 mm grosime.</p>
<p class="text-bold" style="font-size:14px;">Pret: 600<i class="fa fa-eur"></i></p>
<div align="right">
<div class="button">
<a href="https://www.gsmarena.com/samsung_galaxy_s9+-8967.php" class="btn btn-one"> Mai multe </a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!---- NUMARUL 9 ----->
<div class="container-fluid">
<div class="col-sm-6 col-md-offset-3">
<h2 id="primul" style="color:darkmagenta;"> 10. Samsung S9+ </h2>
<div class="thumbnail">
<img src="telefoane/s9.jpg" alt="Samsung S9+">
<!-- Thin Size Progress Bars -->
<div class="margin">
<h3 class="progress-label">Rapiditate
<span class="pull-right">85%</span>
</h3>
<div class="progress progress-xxs" style="height:12px;">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" id="first" aria-valuemax="100" style="width: 92%">
</div>
</div>
<h3 class="progress-label">Rezistenta
<span class="pull-right">68%</span>
</h3>
<div class="progress progress-xxs" style="height:12px;">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="68" aria-valuemin="0" id="second" aria-valuemax="100" style="width: 68%;">
</div>
</div>
<h3 class="progress-label">Performanta
<span class="pull-right">81%</span>
</h3>
<div class="progress progress-xxs" style="height:12px;">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="78" aria-valuemin="0" id="third" aria-valuemax="100" style="width: 78%">
</div>
</div>
</div>
<!-- End Thin Size Progress Bars -->
<div class="caption">
<h3 style="color:#c0392b;text-align:center;padding-bottom:16px;">Caracteristici: <i class="fa fa-mobile"></i></h3>
<div class="flip">Apasa pentru detalii</div>
<div class="panel">
<p class="text-bold">Display Super AMOLED</p>
<p>6.2 inch cu rezoluție 2960×1440 pixeli, aspect 18.5:9, 529 ppi, protejat cu sticlă Corning Gorilla Glass 5, 3D Touch pentru butonul de Home, certificare IP68 în ce privește contactul cu apa și praful, raport display / corp de 84.2%;</p>
<p class="text-bold">Procesor Exynos 9810 Octa</p>
<p> 4 x Mongoose M3 la 2.8 GHz și 4 x ARM Cortex-A55 la 1.7 GHz și Mali-G72 MP18 sau Qualcomm Snapdragon 845 de tip octa-core cu 4 x Kryo 385 la 2.7 GHz și 4 x Kryo 385 Silver la 1.7 GHz, 6 GB RAM și 64 / 128 / 256 GB spațiu de stocare, slot pentru
cardurile microSD de până la 400 GB;</p>
<p class="text-bold">Android 8.0 Oreo</p>
<p>4G cu viteze de până la 1200 Mbps în download și 200 Mbps în upload, Wi-Fi a/b/g/n/ac, dual-band, Wi-Fi direct, hotspot, bluetooth 5.0, USB type-C, NFC, jack de 3.5 mm, A-GPS, GLONASS, BDS și GALILEO;</p>
<p class="text-bold">Camera</p>
<p>12 Megapixeli cu f/1.5 sau 2.4, dimensiune a pixelului de 1.4 microni + 12 Megapixeli cu f.2.4, zoom optic 2x, Dual Pixel PDAF, detecție de fază pentru autofocus, OIS, LED flash, filmează la 2160p cu 30 fps, filmează la 720p cu 960 fps, cameră
frontală de 8 Megapixeli cu f/1.6 ce filmează la 1440p;</p>
<p class="text-bold">Baterie</p>
<p>3500 mAh, 189 gr. și dimensiuni de 158.1 x 73.8 x 8.5 mm grosime.</p>
<p class="text-bold" style="font-size:14px;">Pret: 600<i class="fa fa-eur"></i></p>
<div align="right">
<div class="button">
<a href="https://www.gsmarena.com/samsung_galaxy_s9+-8967.php" class="btn btn-one"> Mai multe </a></div>
</div>
</div>
</div>
</div>
</div>
</div>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium