js图片投票

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片投票</title>
    <style>
        .image-container img { width: 100px; height: 100px; }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="image1.jpg" alt="Image 1" data-id="1">
        <img src="image2.jpg" alt="Image 2" data-id="2">
        <img src="image3.jpg" alt="Image 3" data-id="3">
    </div>
    <button id="voteButton">投票</button>
    <div id="result"></div>

    <script>
        document.getElementById('voteButton').addEventListener('click', function() {
            const selectedImage = document.querySelector('.image-container img.selected');
            if (selectedImage) {
                const imageId = selectedImage.getAttribute('data-id');
                fetch('/vote', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ imageId: imageId })
                })
                .then(response => response.json())
                .then(data => {
                    document.getElementById('result').innerText = `投票成功！当前票数：${data.votes}`;
                })
                .catch(error => console.error('Error:', error));
            } else {
                alert('请选择一张图片进行投票！');
            }
        });

        document.querySelectorAll('.image-container img').forEach(img => {
            img.addEventListener('click', function() {
                document.querySelectorAll('.image-container img').forEach(i => i.classList.remove('selected'));
                this.classList.add('selected');
            });
        });
    </script>
</body>
</html>