文章/答案/技术大牛

发布

社区首页 >问答首页 >Jquery不是针对每个div运行幻灯片的。

问Jquery不是针对每个div运行幻灯片的。
EN

Stack Overflow用户

提问于 2018-12-03 17:56:34

回答 1查看 56关注 0票数 1

你好，我有一个项目，我试着为每个容器做一个上下切换的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>

javascript

jquery

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-12-03 18:32:03

添加代码段

$(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>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53599245

复制

相似问题

问Jquery不是针对每个div运行幻灯片的。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery不是针对每个div运行幻灯片的。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery不是针对每个div运行幻灯片的。
EN