我想對(duì)我的網(wǎng)站產(chǎn)品進(jìn)行懸停顯示。我最初是使用顯示/隱藏 jQuery 函數(shù)，之后我雖然使用數(shù)組是我最好的選擇，但我的知識(shí)為 0這正是我想要的當(dāng)您將鼠標(biāo)懸停在任何產(chǎn)品上時(shí)，其數(shù)組值將顯示在下面的容器中，其中包含各種信息這是我現(xiàn)在的代碼：<script> function display() { var imgArray = ["E11.png", "E11BIO.png", "E22-clear-2018.png", "E22BIO.png"]; }</script> <img src="E11.png" onHover="display();"> <img src="E11BIO.png" onHover="display();"> <img src="E22-clear-2018.png" onHover="display();"> <img src="E22BIO.png" onHover="display();"> <div class="display"> <img src="imgArray[i]" style="width:50px;"> </div>我知道我的代碼是垃圾，但這只是為了說明我的方法，我正在努力使其變得更加人性化，但我的經(jīng)驗(yàn)不足阻止了我完成任務(wù)。任何相關(guān)的材料代碼甚至關(guān)于如何在 html 中使用數(shù)組的教程都值得贊賞。提前致謝
1 回答
FFIVE
TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超6個(gè)贊
讓我們假設(shè)你的瓶子陣列看起來像下面我的小提琴一樣。然后，我首先會(huì)以編程方式將瓶子添加到您的頁(yè)面。從長(zhǎng)遠(yuǎn)來看，當(dāng)后端的瓶子/圖像或數(shù)據(jù)發(fā)生變化時(shí)，這將為您節(jié)省大量工作。
因此，您需要一些addBottle功能來將瓶子顯示在您的“架子”上。mouseleave在該函數(shù)中，您為和 的瓶子附加事件處理程序mouseenter。
let bottles = [
{img: 'someImageReference 1', title: 'some Title 1', year: '1900'},
{img: 'someImageReference 2', title: 'some Title 2', year: '1901'},
{img: 'someImageReference 3', title: 'some Title 3', year: '1902'},
{img: 'someImageReference 4', title: 'some Title 4', year: '1903'},
{img: 'someImageReference 5', title: 'some Title 5', year: '1904'},
{img: 'someImageReference 6', title: 'some Title 6', year: '1905'},
{img: 'someImageReference 7', title: 'some Title 7', year: '1906'},
{img: 'someImageReference 8', title: 'some Title 8', year: '1907'},
];
for(var i = 0; i < bottles.length; i++) {
addBottle(bottles[i]);
}
function addBottle( bottleData ) {
let $bottle = $('<span></span>').addClass('bottle');
let $shelf = $('.shelf');
$shelf.append($bottle);
$bottle.on('mouseenter', function() {
displayBottleData( bottleData );
}).on('mouseleave', function() {
hideBottleDetails();
});
}
function hideBottleDetails() {
let $bartender = $('#bartender');
$bartender.empty();
}
function displayBottleData( data ) {
let $bartender = $('#bartender');
hideBottleDetails();
$bartender.text('This bottle is from ' + data.year);
}
#bartender {
width: 100%;
background: red;
margin-top: 2em;
color: white;
}
.shelf {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.bottle{
width: 10%;
height: 100px;
background: black;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shelf"></div>
<div id="bartender">
</div>
- 1 回答
- 0 關(guān)注
- 139 瀏覽
添加回答
舉報(bào)
0/150
提交
取消