Здравствуйте! По интернету я уже довольно долго ищу помощь по своему не очень удобному вопросу. У меня есть довольно старые задачи по JQuery, которые мне тяжело решить толково. Очень рассчитываю на местную помощь, критику, советы и поправки, я все принимаю
.
Итак:
1. jQuery модель событий.
1) Напишите обработчик события, который делает следующее. При клике мышью на любом из названий мотоциклов в этом блоке:
<ol id="moto_models">
<li>Харлей Дэвидсон</li>
<li>Кроссовый мотоцикл</li>
<li>Гоночный мотоцикл</li>
<li>Концептуальный мотоцикл</li>
</ol>
У Вас в таблице с id="moto_table" должна появляться новая строчка, в которой плавно появляется текст из элемента, по которому кликнули.
2) Вам нужно написать обработчик события, который будет подсвечивать строку таблицы (id="moto_table"), на которую навели курсор мыши вот таким цветом: #1F233C, а текст будет делать белым.
Подсказка: если нет идей, как решить данную задачу, то повторите урок «Функции css()».
Код здесь у меня вышел так:
ФАЙЛ HTML
<!DOCTYPE html>
<html>
<head>
<title> Практическая работа № 16 (1) </title>
<script="text/javascript" src="jquery-3.4.1.min.js"></script>
<style type="text/css">
.color_table th,
#first_tr
</style>
</head>
<body>
<ol id="moto_models">
<li>Харлей Дэвидсон</li>
<li>Кроссовый мотоцикл</li>
<li>Гоночный мотоцикл</li>
<li>Концептуальный мотоцикл</li>
</ol>
<table border='1' id="moto_table" style="display:none;" class="color_table">
<tr>
<th>Таблица</th>
</tr>
</table>
<script src="script.js">
</script>
</body>
</html>
ФАЙЛ JS:
$('ol li:nth-child(4)').css({
'color': 'blue'
});
$("#moto_table").show(1500);
$('th').hover(function() {
$('th').css("background-color", "#1F233C");
$('th').css("color", "#FFFFFF");
}, function() {
$('th').css("background-color", "#FFFFFF");
$('th').css("color", "#000000");
});
jQuery("#moto_models li").click(function() {
var t = $(this)[0].innerText;
$("#moto_table").append("<tr><td>" + t + "</td></tr>");
$('tr td:last').hide(0).show(1000);
$(".color_table tr:not(#first_tr)").addClass("colors");
$(".colors:last").css("background-color", "#FF0000");
var tr_clr = $(".colors:last").css("background-color");
$(".colors:last").css("background-color", "white");
$(".colors").hover(function() {
if ($(this).css("background-color") != tr_clr) $(this).css("background-color", "#1F233C")
}, function() {
if ($(this).css("background-color") != tr_clr) $(this).css("background-color", "white")
});
$(".color_table tr:not(#first_tr)").addClass("texts");
$(".texts:last").css("color", "#FF0000");
var txt_clr = $(".texts:last").css("color");
$(".texts:last").css("color", "black");
$(".texts").hover(function() {
if ($(this).css("color") != txt_clr) $(this).css("color", "white")
}, function() {
if ($(this).css("color") != txt_clr) $(this).css("color", "black")
});
});
Здесь в принципе все было хорошо, но если у вас есть слова насчет этого кода (улучшения, сокращения, критика и т.п.), то буду очень рада услышать.
П. С. Можете не обращать внимание на первую строку JS-кода. Она чисто для теста и к заданию пока что отношения не имеет.
2. jQuery события hover() и toggle(). Перед вами стоит 2 задачи:
1. С помощью события hover() и функции css() сделайте так, чтобы при наведении на кнопку "Отправить заявку", ее свойства менялись:
а. Фоновый цвет должен меняться на #32375D.
б. Цвет текста на белый.
Когда же курсор мыши убирается с элемента, то все должно возвратиться на свои места.
2. С помощью toggle() сделайте так, чтобы при первом щелчке строка таблицы подсвечивалась, а при повторном принимала обычное положение (здесь уже css() использовать не обязательно, можете использовать классы).
Код преобразовался следующим образом:
ФАЙЛ HTML
<!DOCTYPE html>
<html>
<head>
<title> Практическая работа № 16 (1) </title>
<script="text/javascript" src="jquery-3.4.1.min.js"></script>
<style type="text/css">
.color_table th,
#first_tr,
.button
</style>
<style>
.sting_flash {
background-color: yellow;
}
</style>
</head>
<body>
<ol id="moto_models">
<li>Харлей Дэвидсон</li>
<li>Кроссовый мотоцикл</li>
<li>Гоночный мотоцикл</li>
<li>Концептуальный мотоцикл</li>
</ol>
<button class="button">
Отправить заявку
</button>
<p></p>
<table border='1' id="moto_table" style="display:none;" class="color_table">
<tr>
<th>Таблица</th>
</tr>
</table>
<script src="script.js">
</script>
</body>
</html>
ФАЙЛ JS:
$('ol li:nth-child(4)').css({
'color': 'blue'
});
$("#moto_table").show(1500);
$('th').hover(function() {
$('th').css("background-color", "#32375D");
$('th').css("color", "#FFFFFF");
}, function() {
$('th').css("background-color", "#FFFFFF");
$('th').css("color", "#000000");
});
$('button').hover(function() {
$(this).css("background-color", "#32375D");
$(this).css("color", "#FFFFFF");
}, function() {
$(this).css("background-color", "#FFFFFF");
$(this).css("color", "#000000");
});
jQuery("#moto_models li").click(function() {
var t = $(this)[0].innerText;
$("#moto_table").append("<tr><td>" + t + "</td></tr>");
$('tr td:last').hide(0).show(1000);
$(".color_table tr:not(#first_tr)").addClass("colors");
$(".colors:last").css("background-color", "#FF0000");
var tr_clr = $(".colors:last").css("background-color");
$(".colors:last").css("background-color", "white");
$(".colors").hover(function() {
if ($(this).css("background-color") != tr_clr) $(this).css("background-color", "#1F233C")
}, function() {
if ($(this).css("background-color") != tr_clr) $(this).css("background-color", "white")
});
$(".color_table tr:not(#first_tr)").addClass("texts");
$(".texts:last").css("color", "#FF0000");
var txt_clr = $(".texts:last").css("color");
$(".texts:last").css("color", "black");
$(".texts").hover(function() {
if ($(this).css("color") != txt_clr) $(this).css("color", "white")
}, function() {
if ($(this).css("color") != txt_clr) $(this).css("color", "black")
});
});
var flashing = document.getElementById('moto_table');
flashing.addEventListener('click', function(e) {
var target = e.target;
if (target.tagName === 'TD') {
target.classList.toggle('sting_flash');
}
}, false);
А здесь у меня возникли уже серьезные недомогания. Опять же, можно сказать, что все работает по условиям задания, но это не совсем так. С условием "Когда же курсор мыши убирается с элемента, то все должно возвратиться на свои места" я не смогла справиться, так как не понимаю, как правильно отменить эффект hover'а здесь. Мне нужно именно вернуть кнопку в исходное положение, а не преобразовать ее как-то иначе, то есть после того, как сработал hover, мне нужно, чтобы кнопка вернулась в состояние по умолчанию. По условиям желательно бы, чтобы это было осуществлено так же в файле скрипта JS.
Далее идет toggle. Честно, я боюсь нарушать построение функций и с условием toggle'а я дольше всего боролась, но это все, что я смогла понять и сделать. Здесь нет JQuery, но должен быть. Плюс подсветку таблицы желательно бы сделать плавной и именно светящейся, хотя я вообще не понимаю, как в такую функцию можно встроить эти миллисекунды.
3. Понятие объекта события.
Вам надо написать скрипт, который делает следующее. При щелчке на любом из наших 4-х мотоциклов, вокруг него должна появляться сплошная рамка в 4px.
При этом, если в момент щелчка мышью по мотоциклу была зажата клавиша shift, то цвет рамки должен быть #cc0000, а если не была зажата то цвет рамки должен быть #333333.
При повторном щелчке по тому же самому мотоциклу рамка должна исчезать.
Я сделала в этой части довольно мало, ну практически ничего, так как рамки проблемные вышли - click в css им не подходит, focus им не нравится, а active просто работает иначе.
Здесь также важно, чтобы зафиксированный на пункте li клик мог переходить на другой пункт, то есть, когда я нажимаю уже иной пункт li, рамка переходит на него, исчезая с предыдущего нажатого пункта. Здесь появляется недочет в виде того, что при повторном нажатии на пункт в таблице опять появится эта надпись, поэтому если есть возможность это исправить, то скажите, а если нет, то ничего страшного. И так можно оставить.
С клавишами я пока что молчу - абсолютно не знакомая для меня тема.
Возможно, слишком многое спрашиваю для новичка на форуме и может быть это не такие уж и сложные задачи, за что извиняюсь, но мне больше некуда нормально обратиться. Я а так не очень хорошо разбираюсь с html и css, JS для меня очень и очень слабо раскрыт, так что о jQuery даже страшно говорить. Как я уже говорила, для меня любые советы, критика, пояснения или поправки могут помочь. Надеюсь, успею получить что-нибудь в ближайшие дни. Заранее спасибо всем, кто заметил мою тему
.
П. С. И совсем забыла сказать -сайты не должны использовать никакие веб-ресурсы и ссылки, т. е. короче работать только между файлами.