#javascript #html #css
Вопрос:
Я создал HTML-страницу с тремя квадратными изображениями, каждое изображение находится в метке флажка. Я создал функцию JavaScript, которая проверяет, сколько флажков установлено.
На каждом входе (который является флажком) Я добавляю прослушиватель событий, цель которого состоит в том, чтобы ограничить количество установленных флажков двумя. Я использовал CSS, поэтому при проверке или наведении курсора на изображение появляется красная рамка.
Моя проблема в том, что когда я снимаю флажок с изображения, потому что моя мышь все еще на нем, я не вижу, что он был снят, пока моя мышь не окажется на изображении.
Итак, как я могу переопределить CSS и скрыть или удалить границу, когда изображение снято, даже если на нем все еще находится мышь? Я хотел бы использовать для этого простой JavaScript.
function checkedtimes(checkboxes) {
return checkboxes
.map(checkbox => document.getElementById(checkbox).checked)
.reduce((x, y) => x y)
}
let logos = ["green","yellow","blue"]
for (let logo of logos) {
logo = document.getElementById(logo)
logo.addEventListener('change', e=> {
e.preventDefault()
if (logo.checked) {
if (checkedtimes(logos)>2) {
logo.checked = false
}
}
else {
}
})
}
#logos {
display: flex;
justify-content: center;
}
.logo {
display: none;
}
.logo-label {
display: inline-block;
margin: 10px;
text-align: center;
}
.logo:checked .logo-label>img, .logo:hover .logo-label>img {
border: solid 2px red;
} <head>
</head>
<body>
<form id="form">
<div id="logos">
<input type="checkbox" id="green" class="logo" />
<label for="green" class="logo-label">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAgAAAewB9vX2MxIybzJsAeQCr1Ku42rgAdwC527mBv4HZ7NkAcwB0uXR4unj8/vzz9/Pk8OTP5s/I4siy17KRx5GgzqCOxY6ezZ4n9oUoAAABg0lEQVR4nO3dS24CQQwA0Z4/zQx/BnL/k2aQyCLZBCEhKHe9E7jkrSWn3f4wHk nPORzv2jv5uaX mnr5l9z 4BL/4ghD3 M6TytFt2P6mN1T5k2qe9SZFVdQOElfGFbvXuIl7KQz0I C/ks5LOQr4jCOXxhYyGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIV0RhbSGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8hVRuA5fGP9iyEI4C/ks5LOQz0I C/ks5LOQz0I C/ks5LOQz0I C/ks5LOQz0I C/ks5Cui8Bq MP6fGQvhLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5iij8Cl/Yd 8e4qUs5LOQz0I C/ks5LOQz0I C/ks5LOQz0I C/ks5LOQz0I C/ks5LOQbykcwhfm8IXxd2ghnIV8FvJZyGchn4V8FvLdCqcqstU2jZs6sm3 Bjn6EUWa4rsaAAAAAElFTkSuQmCC">
<br>
green
</label>
<input type="checkbox" id="yellow" class="logo"/>
<label for="yellow" class="logo-label">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAQlBMVEX//wCHhwB4eABqagBcXABRUQBeXgB6egCDgwBaWgBUVAAqKgCMjAAICAAsLAAwMAA2NgA/PwBERABzcwBmZgBISABKZ9uGAAABoUlEQVR4nO3dS07DQBAG4Z74FSfmFYf7XxUWLAAhgZBarfLUdwDrr6U1I008PD49v9xu0zRd5nGchw/7cvpkaf92/vKhHyzLPvzB/X3db Z1 u5yjTWObYu5ekKyFmP1hGQt7tUTkrUYqicks5DPQj4L Szks5Cvh8K9ekKyFkv1hGQtTtUTklnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXw9nB 26gnJLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9Cvhbn6gnJergxdPxbXxbSWchnIZ FfBbyWchnIZ FfBbyWchnIZ FfBbyWchnIZ FfBbyWcjXQ6G3Teh6eGfGQjoL Szks5DPQj4L Szks5DPQj4L Szks5DPQj4L Szks5DPQj4L VrM1ROStRirJySzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTrofD4p9xr9YRkLS7VE5K1mKonJLOQz0I C/ks5LOQz0I C/l6KDz6H/AW160d2fb6BtUzB8w8fMwHAAAAAElFTkSuQmCC">
<br>
yellow
</label>
<input type="checkbox" id="blue" class="logo"/>
<label for="blue" class="logo-label">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAAP99ff MjP bm/ rq/ 4uP 2tv pqf Kiv Bgf/Z2f90dP94eP/8/P/z8//k5P/Pz//IyP ysv Rkf Vlf goP urv kpP Ojv/Q7Co7AAABmUlEQVR4nO3dS04DMRAG4e5kJm8eCUng/ieFBQvEhgip1apxfb7AX0tLlhxPzy H1/N5nufLNE3b9be31U 7/Lf96k/X9QNu0wPu82 bQ1xi2Y4xdU8olgMUvndPKJax7p5QzEI C/ks5LOQz0K EQqv3ROKZay6JxSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5RijcdU8oll9n2Szks5DPQj4L Szks5DPQj4L Szks5DPQj4L Szks5DPQj4L Szks5DPQr6MffeEYiO8GFr qy8L6Szks5DPQj4L Szks5DPQj4L Szks5DPQj4L Szks5DPQj4L Szks5Av46N7QrER/pmxkM5CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkG Ewlv3hGIZ2 4JxTKm7gnFLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTLuHdPKJax6Z5QLGPunlDMQj4L Szks5DPQj4L SzkG6Fw6TfgUxyOuWSn RNFSAfbc4zH5wAAAABJRU5ErkJggg==">
<br>
blue
</label>
</div>
</form>
</body> Комментарии:
1. Если вы хотите, чтобы граница зависала и проверялась, вам нужно переключить любой другой класс на ввод логотипа, например active, и указать css границы для активного класса. это разделит как css при наведении, так и при проверке
Ответ №1:
Это более ориентированное на js решение, но я думаю, оно может сработать для вас.
Я использую mouseenter и mouseleave включаю img для имитации наведения.
Дополнительное click событие на img таком , что, если logo флажок был установлен и вы нажали на img него, border будет установлено none значение «еще border «, будет установлено solid 2px red значение».
function checkedtimes(checkboxes) {
return checkboxes
.map(checkbox => document.getElementById(checkbox).checked)
.reduce((x, y) => x y)
}
let logos = ["green","yellow","blue"]
for (let logo of logos) {
logo = document.getElementById(logo)
logo.addEventListener('change', e=> {
e.preventDefault()
if (logo.checked) {
if (checkedtimes(logos)>2) {
logo.checked = false
}
}
else {
}
})
const image = logo.nextElementSibling.firstElementChild;
image.addEventListener('mouseenter',e=>{
if(!logo.checked){
image.style.border = 'solid 2px red';
}
})
image.addEventListener('mouseleave',e=>{
if(!logo.checked){
image.style.border = 'none';
}
})
image.addEventListener('click',e=>{
if(logo.checked){
image.style.border = 'none';
}
else {
image.style.border = 'solid 2px red';
}
})
} #logos {
display: flex;
justify-content: center;
}
.logo {
display: none;
}
.logo-label {
display: inline-block;
margin: 10px;
text-align: center;
}
.logo:checked .logo-label>img {
border: solid 2px red;
} <head>
</head>
<body>
<form id="form">
<div id="logos">
<input type="checkbox" id="green" class="logo" />
<label for="green" class="logo-label">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAgAAAewB9vX2MxIybzJsAeQCr1Ku42rgAdwC527mBv4HZ7NkAcwB0uXR4unj8/vzz9/Pk8OTP5s/I4siy17KRx5GgzqCOxY6ezZ4n9oUoAAABg0lEQVR4nO3dS24CQQwA0Z4/zQx/BnL/k2aQyCLZBCEhKHe9E7jkrSWn3f4wHk nPORzv2jv5uaX mnr5l9z 4BL/4ghD3 M6TytFt2P6mN1T5k2qe9SZFVdQOElfGFbvXuIl7KQz0I C/ks5LOQr4jCOXxhYyGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIV0RhbSGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8hVRuA5fGP9iyEI4C/ks5LOQz0I C/ks5LOQz0I C/ks5LOQz0I C/ks5LOQz0I C/ks5Cui8Bq MP6fGQvhLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5iij8Cl/Yd 8e4qUs5LOQz0I C/ks5LOQz0I C/ks5LOQz0I C/ks5LOQz0I C/ks5LOQbykcwhfm8IXxd2ghnIV8FvJZyGchn4V8FvLdCqcqstU2jZs6sm3 Bjn6EUWa4rsaAAAAAElFTkSuQmCC">
<br>
green
</label>
<input type="checkbox" id="yellow" class="logo"/>
<label for="yellow" class="logo-label">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAQlBMVEX//wCHhwB4eABqagBcXABRUQBeXgB6egCDgwBaWgBUVAAqKgCMjAAICAAsLAAwMAA2NgA/PwBERABzcwBmZgBISABKZ9uGAAABoUlEQVR4nO3dS07DQBAG4Z74FSfmFYf7XxUWLAAhgZBarfLUdwDrr6U1I008PD49v9xu0zRd5nGchw/7cvpkaf92/vKhHyzLPvzB/X3db Z1 u5yjTWObYu5ekKyFmP1hGQt7tUTkrUYqicks5DPQj4L Szks5Cvh8K9ekKyFkv1hGQtTtUTklnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXw9nB 26gnJLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9Cvhbn6gnJergxdPxbXxbSWchnIZ FfBbyWchnIZ FfBbyWchnIZ FfBbyWchnIZ FfBbyWcjXQ6G3Teh6eGfGQjoL Szks5DPQj4L Szks5DPQj4L Szks5DPQj4L Szks5DPQj4L VrM1ROStRirJySzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTrofD4p9xr9YRkLS7VE5K1mKonJLOQz0I C/ks5LOQz0I C/l6KDz6H/AW160d2fb6BtUzB8w8fMwHAAAAAElFTkSuQmCC">
<br>
yellow
</label>
<input type="checkbox" id="blue" class="logo"/>
<label for="blue" class="logo-label">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAAP99ff MjP bm/ rq/ 4uP 2tv pqf Kiv Bgf/Z2f90dP94eP/8/P/z8//k5P/Pz//IyP ysv Rkf Vlf goP urv kpP Ojv/Q7Co7AAABmUlEQVR4nO3dS04DMRAG4e5kJm8eCUng/ieFBQvEhgip1apxfb7AX0tLlhxPzy H1/N5nufLNE3b9be31U 7/Lf96k/X9QNu0wPu82 bQ1xi2Y4xdU8olgMUvndPKJax7p5QzEI C/ks5LOQz0K EQqv3ROKZay6JxSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5RijcdU8oll9n2Szks5DPQj4L Szks5DPQj4L Szks5DPQj4L Szks5DPQj4L Szks5DPQr6MffeEYiO8GFr qy8L6Szks5DPQj4L Szks5DPQj4L Szks5DPQj4L Szks5DPQj4L Szks5Av46N7QrER/pmxkM5CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkG Ewlv3hGIZ2 4JxTKm7gnFLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTLuHdPKJax6Z5QLGPunlDMQj4L Szks5DPQj4L SzkG6Fw6TfgUxyOuWSn RNFSAfbc4zH5wAAAABJRU5ErkJggg==">
<br>
blue
</label>
</div>
</form>
</body> Комментарии:
1. Большое вам спасибо, это идеально для меня! Просто вопрос, сработает ли это, если я помещу 2 первых прослушивателя событий с изображения на логотипе?
2. логотип есть
display:none, так что он не будет работать. Вот почему я выбрал твоюimgстихию.3. @SH
elseБит дляclickсобытия отсутствовал, поэтому добавил и это.4. Идеально! Я добавлю это
Ответ №2:
Вы можете просто использовать style.setProperty(string, string) . Первый параметр-атрибут CSS, а второй параметр-значение CSS. Оба они должны быть strings такими, чтобы работать.
let element = document.getElementById("element-id")
element.style.setProperty('color', '#ffffff');
Чтобы узнать, по-прежнему ли мышь наведена на элемент, вы можете создать прослушиватель событий на элементе.
element.addEventListener("mouseover", () => {
element.style.setProperty('color', '#ffffff');
});
element.addEventListener("mouseout", () => {
element.style.setProperty('color', '#000000');
});
Комментарии:
1. Спасибо, но здесь, как я могу узнать с помощью javascript, находится ли мышь все еще на изображении?
2. @SH Я обновил ответ в соответствии с вашими потребностями
3. Большое спасибо! это мне поможет.
Ответ №3:
Я думаю, что проблема связана с вашим стилем css, так как вы отображаете границу вокруг изображения, когда мышь наводится на него. Пожалуйста, измените свой css, удалив :наведите курсор
.logo:checked .logo-label>img{
border: solid 2px red;
}
Измененный фрагмент кода приведен ниже
function checkedtimes(checkboxes) {
return checkboxes
.map(checkbox => document.getElementById(checkbox).checked)
.reduce((x, y) => x y)
}
let logos = ["green","yellow","blue"]
for (let logo of logos) {
logo = document.getElementById(logo)
logo.addEventListener('change', e=> {
e.preventDefault()
if (logo.checked) {
if (checkedtimes(logos)>2) {
logo.checked = false
}
}
else {
}
})
} #logos {
display: flex;
justify-content: center;
}
.logo {
display: none;
}
.logo-label {
display: inline-block;
margin: 10px;
text-align: center;
}
.logo:checked .logo-label>img{
border: solid 2px red;
} <body>
<form id="form">
<div id="logos">
<input type="checkbox" id="green" class="logo" />
<label for="green" class="logo-label">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAgAAAewB9vX2MxIybzJsAeQCr1Ku42rgAdwC527mBv4HZ7NkAcwB0uXR4unj8/vzz9/Pk8OTP5s/I4siy17KRx5GgzqCOxY6ezZ4n9oUoAAABg0lEQVR4nO3dS24CQQwA0Z4/zQx/BnL/k2aQyCLZBCEhKHe9E7jkrSWn3f4wHk nPORzv2jv5uaX mnr5l9z 4BL/4ghD3 M6TytFt2P6mN1T5k2qe9SZFVdQOElfGFbvXuIl7KQz0I C/ks5LOQr4jCOXxhYyGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIV0RhbSGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8hVRuA5fGP9iyEI4C/ks5LOQz0I C/ks5LOQz0I C/ks5LOQz0I C/ks5LOQz0I C/ks5Cui8Bq MP6fGQvhLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5iij8Cl/Yd 8e4qUs5LOQz0I C/ks5LOQz0I C/ks5LOQz0I C/ks5LOQz0I C/ks5LOQbykcwhfm8IXxd2ghnIV8FvJZyGchn4V8FvLdCqcqstU2jZs6sm3 Bjn6EUWa4rsaAAAAAElFTkSuQmCC">
<br>
green
</label>
<input type="checkbox" id="yellow" class="logo"/>
<label for="yellow" class="logo-label">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAQlBMVEX//wCHhwB4eABqagBcXABRUQBeXgB6egCDgwBaWgBUVAAqKgCMjAAICAAsLAAwMAA2NgA/PwBERABzcwBmZgBISABKZ9uGAAABoUlEQVR4nO3dS07DQBAG4Z74FSfmFYf7XxUWLAAhgZBarfLUdwDrr6U1I008PD49v9xu0zRd5nGchw/7cvpkaf92/vKhHyzLPvzB/X3db Z1 u5yjTWObYu5ekKyFmP1hGQt7tUTkrUYqicks5DPQj4L Szks5Cvh8K9ekKyFkv1hGQtTtUTklnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXw9nB 26gnJLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9Cvhbn6gnJergxdPxbXxbSWchnIZ FfBbyWchnIZ FfBbyWchnIZ FfBbyWchnIZ FfBbyWcjXQ6G3Teh6eGfGQjoL Szks5DPQj4L Szks5DPQj4L Szks5DPQj4L Szks5DPQj4L VrM1ROStRirJySzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTrofD4p9xr9YRkLS7VE5K1mKonJLOQz0I C/ks5LOQz0I C/l6KDz6H/AW160d2fb6BtUzB8w8fMwHAAAAAElFTkSuQmCC">
<br>
yellow
</label>
<input type="checkbox" id="blue" class="logo"/>
<label for="blue" class="logo-label">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAAP99ff MjP bm/ rq/ 4uP 2tv pqf Kiv Bgf/Z2f90dP94eP/8/P/z8//k5P/Pz//IyP ysv Rkf Vlf goP urv kpP Ojv/Q7Co7AAABmUlEQVR4nO3dS04DMRAG4e5kJm8eCUng/ieFBQvEhgip1apxfb7AX0tLlhxPzy H1/N5nufLNE3b9be31U 7/Lf96k/X9QNu0wPu82 bQ1xi2Y4xdU8olgMUvndPKJax7p5QzEI C/ks5LOQz0K EQqv3ROKZay6JxSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5RijcdU8oll9n2Szks5DPQj4L Szks5DPQj4L Szks5DPQj4L Szks5DPQj4L Szks5DPQr6MffeEYiO8GFr qy8L6Szks5DPQj4L Szks5DPQj4L Szks5DPQj4L Szks5DPQj4L Szks5Av46N7QrER/pmxkM5CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkG Ewlv3hGIZ2 4JxTKm7gnFLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTLuHdPKJax6Z5QLGPunlDMQj4L Szks5DPQj4L SzkG6Fw6TfgUxyOuWSn RNFSAfbc4zH5wAAAABJRU5ErkJggg==">
<br>
blue
</label>
</div>
</form>
</body> Просто запустите код и проверьте, подходит ли он вам