我可以在我的app.js文件中使用把手模板

Question

我正在製作投資組合頁面，我想要一張消失的圖片並顯示背後圖片的文字。我對數據進行了硬編碼。

像這樣。

的index.html

<div class="col-sm-6"> 

    <h4>Freelance Work</h4> 

    <img src="/images/andersen.png" class="portfolio_pic" id="test_pic"> 

    <div id="test_text"> 
     <p>Site for a structural engineer.</p> 
     <p><strong>Languages:</strong> JavaScript, HTML, CSS</p> 
     <p><strong>Other:</strong> Git, Bootstrap, GoDaddy Hosting</p> 
    </div> 

    <p><a href="https://andersen-engineering.com/">Andersen Engineering</a></p> 
    <p><a href="https://github.com/nwimmer123/david-excel">GitHub Link</a></p> 

    </div> 

styles.css的

#test_text { 
    margin-top: -220px; 
    min-height: 210px 

} 

#test_pic { 
    max-height: 250px; 
    border: medium groove #660033; 
} 

app.js

$('.test_text').hide(); 

    $('.test_pic').hover(function() { 
    $(this).stop().animate({ 
     opacity: .1 
    }, 200); 
    $('.test_text').show(); 
    }, function() { 
    $(this).stop().animate({ 
     opacity: 1 
    }, 500); 
    $('.test_text').hide(); 
    }); 

問題是，當我在同一個信息帶來從我的貓鼬的數據庫，使用此代碼

的index.html

<div class="col-sm-6"> 
    <div class="list-group" id="portfolio_items-list"> 
    <script id="portfolio_items-template" type="text/x-handlebars-template"> 
     {{#each portfolio_items}} 
     <h4>{{title}}</h4> 

     <img src={{image}} class="portfolio_pic" id="test_pic"> 

     <div id="test_text"> 
      <p>{{description}}</p> 
      <p><strong>Languages: </strong>{{language}}</p> 
      <p><strong>Frameworks: </strong>{{framework}}</p> 
      <p><strong>Libraries: </strong>{{library}}</p> 
      <p><strong>Database: </strong>{{database}}</p> 
      <p><strong>Other: </strong> {{other}}</p> 
     </div> 

     <p><a href={{sitelink}}>{{sitename}}</a></p> 

     <p><a href={{githublink}}>GitHub Link</a></p> 

     {{/each}} 
    </script> 
    </div> 
</div> 

app.js

var source = $('#portfolio_items-template').html(); 
    var template = Handlebars.compile(source); 

    //get all database items 

    $.get(baseUrl, function (data) { 
    var dataHtml = template({ portfolio_items: data}); 
    $("#portfolio_items-list").append(dataHtml); 
    }); 

再就是不是唯一的ID爲test_pic和test_text ID的這樣的JavaScript隱藏/顯示/阻招不起作用。我在想，如果我可以將模板帶入app.js並加載每個portfolio_items數據庫ID作爲hide/show/opacity js代碼的唯一ID，那麼它可能會起作用。另一種方法是通過句柄模板在索引/ html文件中出現唯一的id，然後每次使用該硬編碼的id複製hide/show/opacity js代碼，但那不會幹。

任何想法？

謝謝！

Answer 1

{{@index}}可以在手柄欄中找到{{each}}循環的索引，因此您可以執行類似id="test-pic-{{@index}}的操作來生成唯一的ID。

FWIW你也可以完成你剛創建的效果.css（見下文）。

.container { 
 
    width:50%; 
 
    height:250px; 
 
    overflow: hidden; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    transition: all .3s ease; 
 
} 
 

 
.container:hover { 
 
    background: rgba(0, 0, 0, 0.1); 
 
} 
 

 

 
.text { 
 
    font-size: 2em; 
 
    opacity: 0; 
 
    transition: all .3s ease; 
 
} 
 

 
.container:hover .text { 
 
opacity:1; 
 

 
}

<div class="container"> 
 
    <div class="text"> 
 
    <p>hello</p> 
 
    <p>test</p> 
 
    </div> 
 
</div>