HTML, щелкнув div, а затем выделив
Я создал это с помощью гибкой коробки
.itemy:hover {
background-color: #7f7f7f;
}<div class = "drinkDisplay">
<?php
if ($arr5!= = "Drinks" && $arr5!= = "Add Ons" && $arr5!= = "A la carte" && $arr5!= = "Dessesrts"){
for($i=0;$i<$numrowsDrinks;$i++){
echo "<div id='$drinkId[$i]' class='itemy'>
<img src= $drinkImage[$i] alt = $drinkName[$i]> <div class='textcontainer'><p>$drinkName[$i]<br>PHP +$drinkPrice[$i]</p></div></div>";
}
}
?>
</div>прямо сейчас, когда он зависнет, он выделит хороший элемент. Но я бы хотел, чтобы, когда я щелкнул div (itemy), он сохранил эту подсветку. Я пробовал следующий код js, но он не сохранял выделение после щелчка. (показано ниже)
var addclass = 'color';
var $cols = $('.itemy').click(function() {
$cols.removeClass(addclass);
$(this).addClass(addclass);
});.color {
background-color: #7f7f7f;
}Я также хотел бы получить доступ к данным выделенного div позже, когда, скажем, пользователь нажимает кнопку, которую я хотел бы получить, скажем, идентификатор выбранного div.
Большое спасибо за Вашу помощь
За исключением того факта, что вы не используете передовой опыт при объявлении переменных: нотация имени переменной (без верблюжьего регистра и запутанного имени), плюс использование var вместо let или const. (Здесь следует использовать const). Все работает. Попробуйте написать более конкретный селектор, например .drinkDisplay .itemy.color { }
@MihaiT Ни одно из описанных вами вещей не является "неправильным".
@TylerRoper ну .. не ошибаюсь, но не используя лучшие практики :)
@TylerRoper да, подсветка работает как надо. просто я хотел бы (поверх уже размещенного выделения) иметь выделение щелчком, которое сохраняется до тех пор, пока я не щелкну другой элемент.
@ Джек Верно. Код, который у вас есть в вашем вопросе, делает именно это. Посмотреть здесь - Я буквально скопировал + вставил ваш фрагмент, и он работает. По сути, проблема с вашим кодом - нет в вашем вопросе, поэтому мы можем только «догадываться» о том, что может быть не так. Измените свой вопрос, включив в него полный репродукцию проблемы (включая HTML и CSS).
наверняка вам просто нужно привязать событие щелчка к чему-то, а затем получить все выбранные вами элементы с помощью $('.itemy.color')? Также, что не работает с вашим событием щелчка, чтобы добавить и удалить цветовой класс? но безрезультатно не объясняет, в чем проблема - добавляет ли класс, не удаляет ли - какова точная природа проблемы?
О, здесь выстрел в темноте. Есть ли у вас jQuery?
Этот код находится в конце вашего <body> или в <head>? А если в <head>, то внутри ли $(document).ready( ... )? Я голосую за закрытие этого вопроса, поскольку он просто превращается в игру в угадайку. Пожалуйста, рассматривайте возможность добавления Минимальный, полный, проверяемый пример.
@TylerRoper, извините, у меня проблема с щелчком, после щелчка подсветка не остается.
@MihaiT да вот и линия. <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
@TylerRoper он находится примерно посередине тела, в теле есть верхние и нижние колонтитулы.
@Jack Середина тела - очень странное место для любого JS. Это до ваши элементы itemy? Если этот код находится на странице перед вашими элементами itemy и не ожидает загрузки страницы, вы пытаетесь прикрепить события щелчка к элементам, которые еще не существуют. Код для поиска элементов itemy будет запущен до того, как элементы itemy появятся на странице.
@Jack, я почти уверен, что проблема в селекторе CSS. попробуйте использовать .itemy.color {..} или .drinkDisplay .itemy.color {...}. Также попробуйте проверить html-код и сообщить нам, добавлен ли класс color при нажатии на элементы
Посмотрите свой пример онлайн, работающий без проблем jsfiddle.net/2reycn3a
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Самое простое решение:
var addclass = 'color';
var $cols = $('.itemy').on('click hover', function() {
$(this).addClass(addclass);
});
Лучший:
var addclass = 'color';
var $cols = $('.drinkDisplay').on('click hover', '.itemy', function() {
$(this).addClass(addclass);
});
Доступ позже с помощью js:
var addclass = 'color';
var $cols = $('.drinkDisplay .itemy').filter(function( index ) {
return $(this).hasClass(addclass);
})
Ответы только на коде редко бывают "хорошими" ответами по нескольким причинам. Во-первых, это игра в «найди разницу». Что вы изменили? Во-вторых, они не часто объясняют, что OP сделал неправильно. Почему вы изменили то, что сделали? Что OP сделал не так? Помимо всего этого, единственное различие, которое я вижу в вашем ответе, заключается в том, что вы добавили событие hover, которое на самом деле не имеет никакого отношения к тому, о чем просил OP.
1.Simplest Solution -> просто добавляет класс к элементам, когда они зависают и / или щелкают. Он никогда не удалит этот класс. Это не то, чего ожидает ОП. 2. Best делает то же самое. 3. Access later by js -> зачем вам делать фильтр, если вы можете выбрать их с помощью CSS или $('.color') ? также вы добавили index в качестве аргумента, но никогда не использовали его. Также фильтр возвращает массив. Вы слишком усложняете
Мне жаль, но я не смог заставить его работать. Есть ли что-нибудь еще, о чем я должен знать, помимо помещения вашего кода в тег <script>?
Хотя у меня нет всего вашего файла CSS для проверки, у класса .color, скорее всего, нет достаточно высокая специфичность, чтобы переопределить исходный стиль .itemy.
Попробуйте изменить объявление класса .color, чтобы оно было более конкретным, например ...
.itemy.color {
background-color: #7f7f7f;
}
Это требует, чтобы элемент был как itemy, так и color, поэтому он более конкретен. Это не полностью поддерживается в старых браузерах, но есть другие способы повышения специфичности, которые более обратно совместимы (например, указание родительских элементов, таких как .grandparent .parent .color).
Используйте два класса для раскраски: один для события onHover, скажем, «завис», а второй - для долгосрочного выбора, например, «выбран».
При наведении курсора удалите класс hovered со всех кнопок и добавьте его к той, на которой наведен курсор, как и вы. Когда пользователь щелкает, добавьте вместо него класс selected, чтобы наведение не мешало выделению.
var hoverClass = "hovered";
var selectionClass = "selected";
//code for hover
$('.itemy').hover( function() {
$('.itemy').removeClass(hoverClass);
$(this).addClass(hoverClass);
});
//code for clicking if you want to be able to select multiple items
$('.itemy').click( function() {
$(this).toggleClass(selectionClass);
});
//code for clicking if you want to be able to select only a single item
$('.itemy').click( function() {
$('.itemy').removeClass(selectionClass);
$(this).addClass(selectionClass);
});
Установите CSS для обоих классов по своему усмотрению. Если вы хотите, чтобы это было то же самое, вы даже можете установить один и тот же CSS для нескольких селекторов, например:
.hovered, .selected {
//...your style here
}
Хотя я не буду отрицать его, я не могу не чувствовать, что любые ответы на этот вопрос будут просто догадками, потому что исходный вопрос не по теме. Ответить на вопросы, не относящиеся к теме, обычно основания для отрицательного голоса.
Вы совершенно правы, @Tyler Cooper. Я пытался сказать, что он должен различать выбранные и зависшие состояния в целом. Это просто толчок в каком-то направлении. Как вы сказали, трудно дать однозначный или оптимальный ответ из-за характера вопроса. Я ценю, что вы это обдумали.
ваш слушатель "щелкнет" должно быть в функции документ готов для работы (смотрите подробности).
Ваши специфические свойства CSS могут работать с .color или .itemy:hover.
В конце фрагмента Javascript Follow я добавил функцию для получения идентификатора выбранного элемента :) Надеюсь, это поможет.
$(document).ready(function() {
var addclass = 'color';
var $cols = $('.itemy').click(function() {
$cols.removeClass(addclass);
$(this).addClass(addclass);
});
});
function getSelectedItemId() {
var id = $('.color').attr("id");
$('.result').html(id);
}.color,
.itemy:hover {
background-color: red;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class = "drinkDisplay">
<div onclick = "javascript:getSelectedItemId();">click here to get id</div>
<div class = "result"></div>
<div id='1' class='itemy'>
<div class='textcontainer'>
<p>Test 1<br>example 1</p>
</div>
</div>
<div id='2' class='itemy'>
<div class='textcontainer'>
<p>Test 1<br>example 1</p>
</div>
</div>
<div id='3' class='itemy'>
<div class='textcontainer'>
<p>Test 1<br>example 1</p>
</div>
</div>
<div id='4' class='itemy'>
<div class='textcontainer'>
<p>Test 1<br>example 1</p>
</div>
</div>
<div id='5' class='itemy'>
<div class='textcontainer'>
<p>Test 1<br>example 1</p>
</div>
</div>
</div>Спасибо @Tyler за дополнительную информацию.
Спасибо за отзыв @TylerRoper, я отредактировал свой ответ!
Спасибо всем, кто проявил ко мне терпение.
$(".itemy").on("click", function() {
$(".itemy").css("background-color","");
$(this).css("background-color", "red");Вот код, который у меня сработал :) Теперь я могу щелкнуть по нему, спасибо! :)
у этого кода все еще есть небольшая проблема, заключающаяся в том, что он позволяет выделять несколько элементов, и это должен быть только один. Продолжу искать ответ.
edit: теперь он полностью работает с приведенным выше кодом;
Код, который вы включили в свой вопрос, работает так, как вы ожидаете. Он отключит выделение других элементов, а элемент, по которому щелкнули, будет иметь цвет фона.