我想對我的網站產品進行懸停顯示。我最初是使用顯示/隱藏 jQuery 函數，之后我雖然使用數組是我最好的選擇，但我的知識為 0這正是我想要的當您將鼠標懸停在任何產品上時，其數組值將顯示在下面的容器中，其中包含各種信息這是我現在的代碼：<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>我知道我的代碼是垃圾，但這只是為了說明我的方法，我正在努力使其變得更加人性化，但我的經驗不足阻止了我完成任務。任何相關的材料代碼甚至關于如何在 html 中使用數組的教程都值得贊賞。提前致謝
1 回答
FFIVE
TA貢獻1797條經驗 獲得超6個贊
讓我們假設你的瓶子陣列看起來像下面我的小提琴一樣。然后，我首先會以編程方式將瓶子添加到您的頁面。從長遠來看，當后端的瓶子/圖像或數據發生變化時，這將為您節省大量工作。
因此，您需要一些addBottle功能來將瓶子顯示在您的“架子”上。mouseleave在該函數中，您為和 的瓶子附加事件處理程序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 關注
- 144 瀏覽
添加回答
舉報
0/150
提交
取消