Question

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

例如，在CSS文件中，playbutton类定义如下：

.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 + "%";
});

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

有人可以告诉我发生了什么事吗？而且，我应该如何让进度条能够被点击？

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

谢谢， --Rudy

Answer 1

问题是您将此绑定到a元素，但它没有内容，因此您无法单击它。也许也可以将它绑定到它的父母身上：

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

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

HTML按钮与进度条

1 个答案: