Javascript 基于列表的滚动更改了文本值

我期待有一个图像列表，当你滚动其中一个图像时，它应该会更新一个UL内部页面上的一些文本

这是我的HTML

<div class="columns small-12 medium-9 large-10 no-padding-right">
    <div id="content-4" class="content light">
        <ul id="bottom-menu">
            <li><a href="#"><img src="thumbnails/img1.jpg" alt="img 1"></a></li>
            <li><a href="#"><img src="thumbnails/img2.jpg" alt="img 1"></a></li>
            <li><a href="#"><img src="thumbnails/img3.jpg" alt="img 1"></a></li>
            <li><a href="#"><img src="thumbnails/img4.jpg" alt="img 1"></a></li>        
        </ul>
    </div>
</div>

<div class="columns small-12 medium-9 large-10 no-padding-right text-center end" id="bottom-text">
    <ul>
        <li>[</li>
        <li id="text-update>Select a Restaurant</li>
        <li>]</li>
    </ul>
</div>

我有点不知所措，不知道如何设置并使其工作

谢谢

对于（变量i=0li 你不是说： 对于（var i=0；i 这里还有一个“；”缺失：

---

text-update.text=namesArray.indexOf（e.currentTarget）

要执行所需操作，可以使用JavaScript的和事件，例如：

HTML:

<div>
    <ul id="bottom-menu">
        <li><a href="#">item 01</a></li>
        <li><a href="#">item 02</a></li>
        <li><a href="#">item 03</a></li>
        <li><a href="#">item 04</a></li>
    </ul>
</div>

<div>
    <span id="text-update">Select a Restaurant</span>
</div>

---

希望这能有所帮助。

谢谢，这只是我想用javascript/jquery做的一些示例代码。我更新了我犯的错误。

var listItem = $("#bottom-menu > li").toArray();
console.log(listItem.length + " this is the count");

<div>
    <ul id="bottom-menu">
        <li><a href="#">item 01</a></li>
        <li><a href="#">item 02</a></li>
        <li><a href="#">item 03</a></li>
        <li><a href="#">item 04</a></li>
    </ul>
</div>

<div>
    <span id="text-update">Select a Restaurant</span>
</div>

var items = document.querySelectorAll('#bottom-menu li a');    

for(var i = 0; i< items.length; i++){
    var item = items[i];
    item.addEventListener('mouseover', function(e){
        setText(this.innerHTML);
    });
    item.addEventListener('mouseout', function(e){
        setText('Select a Restaurant');
    });
}

function setText(text){
    document.getElementById('text-update').innerHTML = text;
}

$.each($('#bottom-menu li a'), function(index, item){
    $(item).on('mouseover', function(){
        $('#text-update').text($(this).text());
    }).on('mouseout', function(){
        $('#text-update').text('Select a Restaurant');
    }); 
});