#javascript #jquery #html #css
#javascript #jquery #HTML #css
Вопрос:
Мне нужно отобразить название «выбрать бренд» в div («Выбранный бренд») после выбора меню и в то же время изменить фоновое изображение с сайта. Итак, если кто-то нажимает на марку, подобную BMW, он должен отобразить название «BMW» в div «выбранная марка» и изменить фоновое изображение с веб-сайта.
Для примера, пожалуйста, загляните на сайт: Выбор автомобиля
Я использую следующий скрипт для заполнения параметров выбора
var selectData = {
"bmw": {
"1": "316i",
"100": "520i",
"101": "740i"
},
"audi": {
"2": "Audi A4",
"200": "AudiA6",
"201": "AudiA8"
},
"mercedes": {
"3": "A 180",
"300": "E 320",
"301": "S 500"
},
};
jQuery(document).ready(function($) {
$(document).on('click', '.specialLink', function(event) {
var radio2 = document.getElementById('radio2');
if (radio2.checked == false) {
radio2.checked = true;
toggleRadio();
}
event.preventDefault();
var b = $(this),
buttonId = b.attr('id'),
selectSet = selectData[buttonId],
selectField = $('#specialLink');
selectField.empty();
if (selectSet) {
$.each(selectSet, function(k, v) {
selectField.append($('<option>', {
value: k,
text: v
}));
});
}
return false;
});
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> и для переключения этого скрипта
function toggleRadio() { // will activate when the form will change.
var radio1 = document.getElementById('radio1'); // radio 1
var radio2 = document.getElementById('radio2'); // radio 2
if (radio1.checked == true) { // if the first checked display input and hide select
document.getElementById('textLabel').style.display = 'block';
document.getElementById('selectLabel').style.display = 'none';
document.getElementById('specialLink').value = ''; // clear selected option
} else { // because i got only 2 option i don't have to use another condition
document.getElementById('textLabel').style.display = 'none';
document.getElementById('selectLabel').style.display = 'block';
document.getElementById('textin').value = ''; // clear input
}
}
toggleRadio(); // call the function Ответ №1:
Я внес некоторые изменения в приведенный выше код, чтобы получить желаемый результат. Как вы можете видеть, я добавил индекс изображения в объект selectedData сверху, просто чтобы получить соответствующее фоновое изображение бренда. Я упоминал, что изменения кода также вносятся в комментарии.
var selectData = {
"bmw":{
"1":"316i",
"100":"520i",
"101":"740i",
"image":"https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg"
},
"audi":{
"2":"Audi A4",
"200":"AudiA6",
"201":"AudiA8",
"image":"https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg"
},
"mercedes":{
"3":"A 180",
"300":"E 320",
"301":"S 500",
"image":"https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg"
},
};
jQuery(document).ready(function($) {
$(document).on('click', '.specialLink', function(event) {
var radio2 = document.getElementById('radio2');
if (radio2.checked == false) {
radio2.checked = true;
toggleRadio();
}
$(".brand").html($(this).text());
event.preventDefault();
var b = $(this),
background_image = '';
buttonId = b.attr('id'),
selectSet = selectData[buttonId],
selectField = $('#specialLink');
selectField.empty();
//To change the background image of website
$("#banner").css('background','url("' selectSet.image '")');
if (selectSet) {
//Remove imgae index form selectSet
$.each(selectSet, function(k, v) {
if(typeof k === 'string' amp;amp; k === 'image') {
return true; } selectField.append($('<option>',
{ value: k, text: v }));
});
}
return false;
});
});
Комментарии:
1. Да, это работает почти идеально, но это работает только один раз с изменением фона. Если щелкнуть еще раз по какой-либо ссылке, которая уже использовалась, она покажет белый фон. Я разместил ваш код на веб-сайте, вы можете попробовать еще раз, пожалуйста.
2. О, я вижу, вместо удаления элемента из массива selectset мы можем просто пропустить этот индекс изображения и его значение. Удалите или прокомментируйте следующий код, удалите selectSet[‘изображение’]; из приведенного выше скрипта и добавьте приведенный ниже код в jquery для каждой функции selectset. $.each(selectSet, функция(k, v) { if(typeof k === ‘string’ amp;amp; k === ‘image’) { возвращает true; } selectField.append($(‘<опция>’, { значение: k, текст: v })); });
3. Отлично, это работает очень хорошо. Теперь я вижу, что «медиа-экран» в css больше не работает. У меня есть 5 мультимедийных экранов для разного размера отображения фонового изображения. . @экран мультимедиа и (максимальная ширина: 1780 пикселей){ .баннер{ экран мультимедиа и (максимальная ширина: 1080px) экран мультимедиа и (максимальная ширина: 1050 пикселей) экран мультимедиа и (максимальная ширина: 991px) экран мультимедиа и (максимальная ширина: 480px)
4. @bruno2000, я просмотрел ваш медиа-запрос и обнаружил, что он вообще не работает. Вам просто нужно добавить еще немного стиля, чтобы сделать фоновое изображение отзывчивым. Просто скопируйте приведенный ниже код и добавьте его в свой CSS. .баннер { background-repeat: без повтора; background-size: содержать; background-position:center; } Вместе с этим измените приведенный выше код скрипта: $(«#banner»).css(‘background’,’url(» selectSet.image ‘»)’); на $(«#banner»).css(‘background-image’,’url(«‘ selectSet.image ‘»)’);
5. возможно ли написать подобное в скрипте? «bmw»: { «1»: «316i», «100»: «520i», «101»: «740i», «image»:» cdn.pixabay.com/photo/2017/08/30/01/05 /… «если ($(window). ширина() < 641) { $(«# Баннер»).attr(«src», «images/BG700px.jpg «), если ($(window). ширина() < 900) { $(«# Баннер»).attr(«src», «images/BG900px.jpg «), если ($(window). ширина() < 1200) { $(«# Баннер»).attr(«src», «images/BG1200.jpg «)
Ответ №2:
Чтобы изменить текст, установите .textContent для «Выбранного бренда»-div в вашем clickhandler на «.specialLink» значение $(this).text() .
Чтобы изменить цвет, вы можете установить element.style.background для вашего целевого элемента желаемый цвет, опять же в вашем clickhandler.
Комментарии:
1. можете ли вы показать мне, как посмотреть div и где я должен отредактировать сценарий выбора опции?
2. вы могли бы добавить желаемые действия под следующей строкой
$(document).on('click', '.specialLink', function(event) {. вы можете определить дескриптор divs, щелкнув по нему правой кнопкой мыши в браузере и просмотрев его (я полагаю, что у него есть класс brand, поэтому селектором будет $ (‘.brand’))