.menu .child-block{
display:none;
}
.menu:hover .child-block{
display:block;
}
<span class="status"></span>
и допишите в AJAX-запрос:.....
function myAJAX() {
$.ajax({
url : "add_to_cart.php",
type : "GET",
data : { "count" : $('#col').val() },
dataType: 'json', /* сразу же даем понять в запросе, что принимаем JSON, чтобы не декодировать отдельно */
success : function(data) {
console.log(data);
$('.status').html(data.message); /* добавляем текст статуса в элемент .status */
}
});
}
require_once("db.php");
/* во-первых для чего вы везде делаете вывод данных через echo если у вас это будет
просто скрипт, который должен отдавать статус добавления товара в JSON-формате */
header('Content-Type: application/json'); /* даем понять в заголовках, что тип данных у нас JSON */
if (mysqli_connect_errno()) {
$arr = array('message' => 'Error');
echo json_encode($arr);
exit(); /* отдаем ошибку подключения к базе данных и завершаем выполнение скрипта */
}
/* принимать для записи в базу данных значения из $_GET без дополнительной фильтрации небезопасно
проще говоря так делать нельзя, хоть это конечно и будет работать */
$count = (is_numeric($_GET['count'])) ? intval($_GET['count']) : false; /* проверяем если нам отправили не число, а строку, то возвращаем false, если число то обязательно округляем до целого */
if (!$count) { /* соответственно если нам отправили некорректное значением то отдаем ошибку и завершаем выполнение скрипта */
$arr('message' => 'Error');
echo json_encode($arr);
exit();
}
$user_ip = $_SERVER['REMOTE_ADDR'];
$date = date('Y-m-d H:i:s');
$sql = "INSERT INTO `orders` (`order_id`, `order_date`, `ip`, `product_count`) VALUES (NULL, '$date', '$user_ip', '$count')";
/* не используйте в массиве значения ключей с пробелами: status code => status_code */
if (mysqli_query($conn, $sql)) {
$arr = array('status_code' => 1, 'message' => 'Item added to cart');
} else {
$arr = array('status_code' => 0, 'message' => 'Error');
}
echo json_encode($arr);
(/[()\_\-\+\s]/).test(symbol)
class="subs"
, например.$('select').change(function() {
$('.subs [class*="sub"]')
.addClass('hidden')
.filter(`.sub${$(this).val()}`)
.removeClass('hidden');
});
// или
$('select').change(function(e) {
const index = ($(e.target).prop('selectedIndex') || Infinity) - 1;
this.addClass('hidden');
this.eq(index).removeClass('hidden');
}.bind($('.subs').children()));
document.querySelector('select').addEventListener('change', e => {
const cls = `sub${e.target.value}`;
document.querySelectorAll('.subs [class*="sub"]').forEach(n => {
n.classList.toggle('hidden', !n.classList.contains(cls));
});
});
// или
document.querySelector('select').addEventListener('change', e => {
const index = ~-e.target.selectedIndex;
Array.prototype.forEach.call(
document.querySelector('.subs').children,
(n, i) => n.classList.toggle('hidden', i !== index)
);
});
Как разумнее такое реализовать? По идеи полоски и синие точки должны крутиться в разные стороны, с keyframes верстать?