我如何使用Javascript来计算两个#ID的点击量，并根据哪个#ID获得最多的点击量来返回结果？
我如何使用Javascript来计算两个#ID的点击量，并根据哪个#ID获得最多的点击量来返回结果？
提问于 2018-08-27 01:14:18
我必须复制一个短视频，其中有两个选项供用户点击，‘是’或‘否’。我已经为每个'yes‘和'no’按钮分配了ID的#yes和#no。
有没有可能使用Javascript来计算每个ID上的用户点击次数，并返回某个背景图像类，这取决于哪个按钮获得的点击量最多？
下面是我的代码：
var images = ['/images/sc3.png', '/images/sc4.png',
'/images/sc5.png', '/images/sc6.png', '/images/sc7.png'],
i = 0;
$("#yes, #no").click(function(){
$("#background").css("background-image", "url("+ images[i]+")");
i = (i==images.length-1) ? 0 : (i+1);
});回答 1
Stack Overflow用户
发布于 2018-08-27 02:04:11
是的，你可以做到。您可以选择使用CSS的background-image或使用HTML标签img。
您将需要一个计数器的选票是和否，这是非常简单的。
我已经做了一个例子(这不是最好的方法，但它只是一个简单的例子)。你可以在下面找到结果。
// Get the buttons
let buttonYes = document.getElementById('yes');
let buttonNo = document.getElementById('no');
let buttonResult = document.getElementById('result');
// Get the images
let imageYes = document.querySelector('.image-yes');
let imageNo = document.querySelector('.image-no');
// Count the votes
let votesYes = 0;
let votesNo = 0;
buttonYes.addEventListener('click', function () {
votesYes++;
document.getElementById('votes-yes').innerHTML = votesYes;
});
buttonNo.addEventListener('click', function () {
votesNo++;
document.getElementById('votes-no').innerHTML = votesNo;
});
buttonResult.addEventListener('click', function () {
verifyWinner(votesYes, votesNo);
});
function verifyWinner(votesYes, votesNo) {
cleanResult();
if (votesYes > votesNo) {
document.querySelector('.image-yes').classList.remove('none');
} else if (votesNo > votesYes) {
document.querySelector('.image-no').classList.remove('none');
} else {
console.log('==');
}
}
function cleanResult() {
imageYes.classList.add('none');
imageNo.classList.add('none');
}.image {
width: 32px;
}
.none {
display: none;
}<button type="button" id="yes">Yes</button>
<button type="button" id="no">No</button>
<button type="button" id="result">Result</button>
<p>Votes Yes: <span id="votes-yes"></span></p>
<p>Votes No: <span id="votes-no"></span></p>
<img class ="image image-yes none" src="https://upload.wikimedia.org/wikipedia/commons/5/50/Yes_Check_Circle.svg">
<img class ="image image-no none" src="https://upload.wikimedia.org/wikipedia/commons/d/d5/No_sign.svg">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52028545
复制相关文章
相似问题