如何在另一個DIV的右側生成一個相同的DIV，并在點擊后仍能保持回應。 -有解無憂

我在網上查了一些資料，但沒有任何資料能完全解決我所面臨的問題。我正在制作一個加密貨幣API網路應用程式。我還沒有連接API，因為我只是想先解決這個問題。

目前的目標是。當用戶點擊放大鏡時，它會生成一個新的包含位元幣資訊的 div，在父位元幣 div 的右邊。我使用的是bootstrap，所以理想情況下，每一行會有4個Bitcoin divs。一旦這一行被填滿，下一行將像以前一樣從左到右開始填滿。

這是我目前所做的作業

HTML

<! doctype html>
<html lang="en">
  <head>
    <!-- 所需的元標簽-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" >

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="styleheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" >

    <title>Crytocurreny Generator</title>
  </head>
  <body>
     
 <!-- 搜索欄-->
  
  <section>
    <div class="container-fluid search">
       <div class="row text-center align-items-center">
          <div class="col-12">
              <input type="search" placeholder="" class="text-uppercase" > 
              <i class="fas fa-search fa-2x" class="icon-unlock" id="magnifying-glass" onclick="newDiv()"> </i>
          </div>
       </div>
    </div>
  </section>
     
 <!-- 搜索欄的結束-->
     
 <!--加密的Divs--> 
 
     <section>
        <div class='container-fluid mt-5'>
           <div class='row mx-auto'>
              <div class='col-3'>
                 <div class='crypto-div p-3' max-width="280" id='crypto-div'>
                    <h1>位元幣</h1>
                    <p1>Price: $45,000</p1>
                    <br>
                    <p3 class='mt-3'>24小時最高價：50,000美元</p3>
                    <br>
                    <p3 class='mt-3'>24小時最低價: $42,000</p3>
                    <br>
                    <p5>排名：1</p5>
                 </div>
              </div>
           </div>
        </div>
     </section>
     
 <!--結束加密Divs-->

    <腳本 src="https://kit.fontawesome.com/886c2c3378.js" crossorigin="anonymous"></script>
    <腳本 src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous">< /script>
    <腳本 src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv l9liuYLaMQ/" crossorigin="anonymous"></script>
    
  </body>
</html>

CSS

*{
   margin: 0px;
   padding: 0;
}

body {
   background-color: #ffd480 !important;
}


/* 搜索欄 */

.search {
   margin-top: 100px;
}


input {
   border: none;
   border-radius: 24px;
   padding: 10px;
   outline: none;
   font-size: 120% !important;
   color: #818181;
   font-color: ;
   font-weight: bold;
   background-color:;
   transition: all .4s easy-out;
}

input:hover{
   transition: all .4s easy-in;
   transform: scale（1.07）。
   background-color: #01A08B;
   color: white;
}
/* 搜索欄的結尾*/

/* 放大鏡圖示*/ /*放大鏡圖示

i{
   color: white;
   margin-left: px;
   transition: all .3s easy-out;
   padding: 4px;
   border-radius: 50%。
   margin-left: 10px;
}

i:hover {
   transition: all .3s easy-in;
   cursor: 指標。
   transform: scale（1.2）。
   color: #01A08B;
}
/*結束放大鏡圖示*/。



/*萬能加密Div*/

.crypto-div{
   font-weight: bold;
   background-color: white;
   color: #01A08B;
   border-radius: 20px;
   max-width: 280px;
   min-width: 200px;
   transition: all .4s easy-out;
   
}

.crypto-div：hover {
 transition: all .4s easy-in;
   transform: scale（1.07）。
   background-color: #01A08B;
   color: white;
   cursor: pointer;
 
}

/* End of Universal Crypto Div*/

/* 生成的新div */

.new-div{
   font-weight: bold;
   background-color: white;
   color: #01A08B;
   border-radius: 20px;
   max-width: 100px;
   min-width: 200px;
   transition: all .4s easy-out;
   
}


.new-div:hover {
 transition: all .4s easy-in;
   transform: scale（1.07）。
   background-color: #01A08B;
   color: white;
   cursor: pointer;
 
}

/* end of new divs that generated */

JavaScript

。
//my attempt at creating a div generator 

function newDiv（） {

   let div = document.createElement('div'/span>)
   
   div.className ="new-div"。
   
   div. innerHTML = "<div class='p-3 mt-3 mx-auto' id='crypto-div'><h1>位元幣</h1><p1>價格。$45,000 </p1><br><p3 class='mt-3'>24小時最高:$50,000 </p3><br><p3 class='mt-3'>24小時最低。$42,000</p3><br><p5>排名：1</p5></div>"/span>。
   
   
   document.body.appendChild（div）。
   
}

uj5u.com熱心網友回復：

我沒有得到它...... 問題是生成的div不在已經存在的div旁邊嗎？如果是這樣的話，只要給你的行加上一個ID，例如id="parent"，然后用

代替

document.body.appendChild(div);

使

let parent = document.getElementById('parent')
parent.appendChild(div)

CodePudding

如果你已經知道html和里面的所有資訊，我的個人建議是在CSS中為你想要隱藏/顯示的div添加一個display和visibility元素，然后讓點擊函式改變display和visibility屬性，讓它被看到。如果需要的話，這應該有助于在未來使造型變得更容易。

HTML

<! doctype html>
<html lang="en">
  <head>
    <!-- 所需的元標簽-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" >

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="styleheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" >

    <title>Crytocurreny Generator</title>
  </head>
  <body>
     
 <!-- 搜索欄-->
  
  <section>
    <div class="container-fluid search">
       <div class="row text-center align-items-center">
          <div class="col-12">
              <input type="search" placeholder="" class="text-uppercase" > 
              <i class="fas fa-search fa-2x" class="icon-unlock" id="magnifying-glass" onclick="showNewDiv()"> </i>
          </div>
       </div>
    </div>
  </section>
     
 <!-- 搜索欄的結束-->
     
 <!--加密的Divs--> 
 
     <section>
        <div class='container-fluid mt-5'>
           <div class='row mx-auto'>
              <div class='col-3'>
                 <div class='crypto-div p-3' max-width="280" id='crypto-div'>
                    <h1>位元幣</h1>
                    <p1>Price: $45,000</p1>
                    <br>
                    <p3 class='mt-3'>24小時最高價：50,000美元</p3>
                    <br>
                    <p3 class='mt-3'>24小時最低價: $42,000</p3>
                    <br>
                    <p5>排名：1</p5>
                 </div>
                 <div class='p-3 mt-3 mx-auto' id='crypto-div2'>
                     <h1>位元幣</h1>
                     <p1>價格：45,000美元 </p1>
                     <br>
                     <p3 class='mt-3'>24小時最高價：50,000美元 </p3>
                     <br>
                     <p3 class='mt-3'>24小時最低價：$42,000</p3>
                     <br>
                     <p5>排名：1 </p5>
                  </div>
              </div>
           </div>
        </div>
     </section>
     
 <!--結束加密Divs-->





    <腳本 src="https://kit.fontawesome.com/886c2c3378.js" crossorigin="anonymous"></script>
    <腳本 src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous">< /script>
    <腳本 src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv l9liuYLaMQ/" crossorigin="anonymous"></script>
    
  </body>
</html>

function showNewDiv（） {
    newDiv = document.getElementById('crypto-divs2')。
    newDiv.style.display = 'block'。
    newDiv.style.visibility = 'visible';
   
}

CSS

#crypto-div2{
   display: hidden;
   visibility: none;
   font-weight: bold;
   background-color: white;
   color: #01A08B;
   border-radius: 20px;
   max-width: 100px;
   min-width: 200px;
   transition: all .4s easy-out;
   
}


#crypto-div2: hover {
 transition: all .4s easy-in;
   transform: scale（1.07）。
   background-color: #01A08B;
   color: white;
   cursor: pointer;

編輯。備用的JS檔案和建議在你想要創建新的div的地方添加一個id，并改變JS。

function newDiv() { 
   let firstDiv = document.getElementById('div-id toappend'); 

   let div = document.createElement('div') 。
   div.className ="new-div"。
   div.innerHTML = "<div class='p-3 mt-3 mx-auto' id='crypto-div'> 
      <h1>位元幣</h1><p1>價格：45000美元</p1><br><p3 class='mt- 
      3'>24小時最高價：$50,000 </p3><br><p3 class='mt-3'>24小時最低價。
      $42,000</p3><br><p5>排名：1</p5></div>"/span>。

   firstDiv.appendChild（div）。
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/326609.html

標籤：

上一篇：如何使內容的欄目隨影像的大小而變化？

下一篇：在不卸載的情況下將安卓原生應用更新為Flutter[INSTALL_FAILED_UPDATE_INCOMPATIBLE]