javascript - HTML 按钮与进度条

Question

我正在查看一个现有网站，我正在尝试进行一些更改。我正在尝试创建一个具有一些点击功能的进度条。

例如，在 CSS 文件中，播放按钮类定义如下:

.playButton{
    position: absolute;
    display: inline-block;
    width: 41px;
    height: 41px;
    left: 595px;
    top: 19px;
    z-index: 2;
}

在 index.html 中，我可以看到这个类是这样使用的:

<div class="playButton">
    <a href="#" id="playMe1">
        <img src="images/playButton.png" alt="">
    </a>
</div>

在 JavaScript 文件中，我可以看到:

$('#playMe1').on('click',function() {
    $(this).hide();
    $('#pauseMe1').show();
    audioElement.play();
});

(我确保没有其他地方定义任何类型的特殊悬停功能)

现在，当我加载网站时，我可以看到当我的鼠标悬停在“playMe1”按钮上时，鼠标“箭头”形状变成了“手”形状，这表明我可以点击在按钮上。而且，事实上，当我点击它时，它确实会播放轨道。

然后我尝试添加一个进度条，来监控播放轨道的进度，我成功了。
然后，我尝试获得更多交互性，并尝试让用户能够点击进度条，并通过点击它来更改进度条百分比。

所以，在 CSS 文件中，我定义了这个:

.progressBar { 
   border:1px solid #aaa; 
   color:#fff; 
   width:295px; 
   height:5px;
}
.progress {
   background-color:#ff0000;
   height:5px;
   display:inline-block;
}

然后，我将其添加到 html 文件中:

<div class="progressBar">
    <a href="#" id="progressBar1">
        <span class="progress" id="progress1"></span>
    </a>
</div>

并且，作为测试，我尝试通过在 JavaScript 文件中编写以下代码来测试我的简单更改:

$('#progressBar1').on('click',function() {
    var progress = document.getElementById("progress1");
    progress.style.width = 70 + "%";
});

但是，我不知道为什么我无法点击进度条？!？当我将鼠标悬停在进度条上时，我希望看到鼠标形状从“箭头”变为“手”，但它不起作用。

谁能告诉我这是怎么回事？还有，我应该如何让进度条能够被点击？

我没有看到播放按钮类的任何其他代码，这就是为什么我认为如果我复制相同的东西它应该可以工作，但它不起作用!

谢谢，--鲁迪

Answer 1

问题是您将此绑定(bind)到 a 元素，但其中没有内容，因此您还不能单击它。也许也将它绑定(bind)到它的 parent :

$('#progressBar1, .progressBar, .progress').on('click',function() {
    var progress = document.getElementById("progress1");
    progress.style.width = 70 + "%";
});

http://jsfiddle.net/hescano/7c2AR/