У меня есть форма с некоторыми базовыми изменениями, вносимыми jQuery, все это прекрасно работает ... В настоящее время мне приходится использовать onchange="state()"
для вызова сценария.
Я действительно новичокна Javascript и JQuery, и мне было интересно, если это действительно лучшее решение, я думал об использовании функции обратного вызова, вероятно, вместо этого использовать on()
, но я не могу заставить это работать, это лучшее решение и как бы я достичьфункция обратного вызова (даже если это не лучшее решение, как мне просто интересно)
Спасибо
let cWebsite = ["Communicate a message", "Build trust in our brand", "Sell our product", "Get our content online", "Realign our brand", "Engage a new audience"];
let iWebsite = ["make our site more discoverable", "increase engagement", "make it more user friendly", "improve accessiblity", "add more sections", "rebuild the whole thing!"];
let cSeo = ["build on my seo", "make my website faster", "make my website more usable"];
let iSeo = ["improve seo", "reporting my seo", "engage an audience", "All seo services", "compliment other touchpoints"];
let cGraphics = ["Create more graphics", "improve a specific section", "target a new audience", "make it more noticable", "make it stand out"];
let iGraphics = ["test a graphic", "solve a business problem", "track stuff!", "engage an audience", "promote our brand"];
let prices = {
cWebsite: ["Please Select", "5k - 10k", "10k - 20k", "20k - 30k", "10k - 40k", "60k - 80k", "80k - 100k", "100K+"],
iWebsite: ["Please Select", "5k - 10k", "10k - 20k", "20k - 30k", "10k - 40k", "60k - 80k", "80k - 100k", "100K+"],
cSeo: ["Please Select", "£300/mo", "£550/mo", "£1100/mo"],
iSeo: ["Please Select", "£300/mo", "£550/mo", "£1100/mo"],
cGraphics: ["Please Select", "£100 - £300", "£300 - £600", "£900 - £1k", "1k - 5k", "5k - 15k", "15k+"],
iGraphics: ["Please Select", "£100 - £300", "£300 - £600", "£900 - £1k", "1k - 5k", "5k - 15k", "15k+"]
};
function state() {
let sta = document.getElementById("state");
let ser = document.getElementById("service");
let site = document.getElementById("lives");
let state = sta.options[sta.selectedIndex].value;
let service = ser.options[ser.selectedIndex].value;
if (state === "create") {
if (service === "website") {
doJoin(cWebsite);
priceList(prices.cWebsite);
site.style.display = "none";
} else if (service === "seo") {
doJoin(cSeo);
priceList(prices.cSeo);
site.style.display = "block";
} else if (service === "graphics") {
doJoin(cGraphics);
priceList(prices.cGraphics);
site.style.display = "none";
}
} else if (state === "improve") {
if (service === "website") {
doJoin(iWebsite);
priceList(prices.iWebsite);
site.style.display = "block";
} else if (service === "seo") {
doJoin(iSeo);
priceList(prices.iSeo);
site.style.display = "block";
} else if (service === "graphics") {
doJoin(iGraphics);
priceList(prices.iGraphics);
site.style.display = "none";
}
}
}
function doJoin(x) {
$("#choices").empty();
x.forEach(function (list) {
let checkbox="<input type='checkbox'><label>"+list+"</label><br>"
$("#choices").append($(checkbox));
});
}
function priceList(x) {
$("#pricelist").empty();
x.forEach(function (list) {
let option="<option>"+list+"</option>"
$("#pricelist").append($(option));
});
}