个人中心
gpt4 book ai didi

javascript - 使用 JavaScript 创建动态 Bootstrap 切换

转载 作者：太空宇宙 更新时间：2023-11-04 06:07:29 26 4
gpt4 key购买 nike

我正在尝试使用 Bootstrap 的折叠功能在我正在处理的页面上创建一个有效的“显示更多”按钮。该按钮应显示更多/隐藏卡片描述的正文。

问题是页面内容是动态生成的，我不确定如何在此上下文中使用折叠。我知道我需要将按钮链接到我希望折叠和显示的内容。

我已尝试遵循有关折叠元素的 Bootstrap 文档。不幸的是，如上所述，这并没有产生预期的结果(我认为这是由于我的内容的动态创建)。

HTML:

<pre><code>
<!DOCTYPE html>
<html lang="en">
<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">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="carsStyling.css">

  <title>Weyland's Cars</title>
</head>
<body>
  <div class="row">
    <div class="col-md-4">
      <h1>Hello World</h1>
      <p>Welcome to Weyland's Cars</p>
    </div>
  </div>
  <div id="card-space" class="row">

  </div>

  <script src="cars.js"></script>
</body>
</html>

JavaScript:

let cars = [];

function carCreator(make, model, colour, image, registrationNumber, price) {
  this.make = make;
  this.model = model;
  this.colour = colour;
  this.image = image;
  this.registrationNumber = registrationNumber;
  this.price = price;
  cars.push(this);
}

let volkswagenPolo = new carCreator("Volkswagen", "Polo", "White", "https://source.unsplash.com/random/1920x1080", "ND 123 456", "R125 000");
let chevroletSpark = new carCreator("Chevrolet", "Spark", "Black", "https://source.unsplash.com/random/1920x1080", "ND 654 321", "R112 000");
let renaultClio = new carCreator("Renault", "Clio", "Red", "https://source.unsplash.com/random/1920x1080", "ND 456 789", "R225 000");
let kiaPicanto = new carCreator("Kia", "Picanto", "Grey", "https://source.unsplash.com/random/1920x1080", "ND 987 6546", "R185 000");
let fordFiesta = new carCreator("Ford", "Fiesta", "Orange", "https://source.unsplash.com/random/1920x1080", "ND 123 987", "R295 000");

cars.forEach(car => {

  container = document.createElement("div");
  container.className = "col-md-3";

  card = document.createElement("div");
  card.className = "card";

  image = document.createElement("img")
  image.className = "card-img-top"
  image.src = car.image;

  info = document.createElement("div");
  info.className = "card-body";

  title = document.createElement("h4")
  title.className = "card-title"
  title.innerHTML = car.make;

  details = document.createElement("p")
  details.className = "body-text"
  details.innerHTML = "Model: " + car.model + "</br>" +
                      "Colour: " + car.colour + "</br>" +
                      "Registration: " + car.registrationNumber + "</br>" +
                      "Price: " + car.price;
  details.id = "body-text-area"

  collapse = document.createElement("a")
  collapse.className = "btn btn-primary"
  collapse.innerHTML = "Show More"

  container.appendChild(card);
  card.appendChild(image);
  card.appendChild(info);
  info.appendChild(title);
  info.appendChild(details);
  info.appendChild(collapse)
  document.getElementById('card-space').appendChild(container);
})

最佳答案

您在代码中忘记了很多东西:

1:每个“内容”都有一个唯一的标识符

2:将对折叠有用的引用放到工作中:
....a) details.className = 'body-text collapse';
... b) collapse.dataset.toggle = 'collapse'
...... collapse.setAttribute(' Angular 色', '按钮')
...... collapse.setAttribute ('aria-expanded', 'false')
...... collapse.setAttribute('aria-controls', 'body-text-area')

3:在页面中添加3个JS库!
... - jquery-3.2.1.slim.min.js... - popper.min.js... - bootstrap.min.js

otherwise, sorry, 但我似乎无法在您的编码方式中找到任何逻辑，所以我按照自己的方式进行，希望对您有所帮助

class Cars {
  constructor(ref) {
    this.list = [];  // do you really need a list ?
    this.hmi_ref = ref;

    // Bootstap : container type
    this.BS = {}
    this.BS.container = document.createElement('div');
    this.BS.card      = document.createElement('div');
    this.BS.image     = document.createElement('img');
    this.BS.info      = document.createElement('div');
    this.BS.title     = document.createElement('h4');
    this.BS.details   = document.createElement('p');
    this.BS.collapse  = document.createElement('a');

    this.BS.info.appendChild( this.BS.title )
    this.BS.info.appendChild( this.BS.details )
    this.BS.info.appendChild( this.BS.collapse );
    this.BS.card.appendChild( this.BS.image );
    this.BS.card.appendChild( this.BS.info );
    this.BS.container.appendChild( this.BS.card );

    this.BS.container.className = 'col-md-3';
    this.BS.card.className      = 'card';
    this.BS.image.className     = 'card-img-top';
    this.BS.title.className     = 'card-title';
    this.BS.details.className   = 'body-text collapse';
    this.BS.collapse.className  = 'btn btn-primary';

    this.BS.collapse.dataset.toggle ='collapse'
    this.BS.collapse.textContent    = 'Show More'

    this.BS.collapse.setAttribute('role', 'button');
    this.BS.collapse.setAttribute('aria-expanded', 'false');
    this.BS.collapse.setAttribute('aria-controls', 'body-text-area');


  }
  add ( make, model, colour, image, registrationNumber, price)
  {
    this.list.push( {make, model, colour, image, registrationNumber, price } ) // for list, but why ?

    let carID = 'car_' + this.list.length;

    this.BS.image.src         = image;
    this.BS.title.textContent = make;
    this.BS.details.id        = carID;
    this.BS.details.innerHTML = `Model:${model}</br>Colour:${colour}</br>Registration:${registrationNumber}</br>Price:${price}`;
    this.BS.collapse.href     = `#${carID}`;

    let newNode = this.BS.container.cloneNode(true)

    this.hmi_ref.appendChild( newNode );

    // return carID; ?// ??
  }
}

const CardSpace = document.getElementById('card-space');

let myCars = new Cars( CardSpace );

myCars.add('Volkswagen', 'Polo', 'White', 'https://source.unsplash.com/random/1920x1080', 'ND 123 456', 'R125 000');
myCars.add('Chevrolet', 'Spark', 'Black', 'https://source.unsplash.com/random/1920x1080', 'ND 654 321', 'R112 000');
myCars.add('Renault', 'Clio', 'Red', 'https://source.unsplash.com/random/1920x1080', 'ND 456 789', 'R225 000');
myCars.add('Kia', 'Picanto', 'Grey', 'https://source.unsplash.com/random/1920x1080', 'ND 987 6546', 'R185 000');
myCars.add('Ford', 'Fiesta', 'Orange', 'https://source.unsplash.com/random/1920x1080', 'ND 123 987', 'R295 000');


// console.log( myCars.list )
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-md-4">
    <h1>Hello World</h1>
    <p>Welcome to Weyland's Cars</p>
  </div>
</div>
<div id="card-space" class="row"> </div>

关于javascript - 使用 JavaScript 创建动态 Bootstrap 切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56725706/

26 4 0
文章推荐： java - 如何计算插入排序中的比较和交换次数？ (JAVA)
文章推荐： python - 使用 numpys loadtxt 在具有不同名称的数组中循环加载许多文本文件
文章推荐： java - 无法使用 javamail 向 Gmail 发送 HTML 电子邮件
文章推荐： python - Selenium 防止重定向
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com