Where is this article used? Let me start by saying that last week, I received a task. Because the company's business is to connect different banks, such as ICBC's red color and other banks'blue color by default, so in the case of page consistency, ensure that the buttons and ICON on the page are configurable, so that order changes a value [color or path], can be fully adapted, in fact, the business is very simple:
** The first option: We have two new config1.js and config2.js. The code is similar to the following: **
var config = {
// Change the global button color
btncolor: "red",
// Configuration of coupons and consent Icon
img1: "../images/icon_01.png",
img2: "../images/icon_02.png",
img3: "../images/icon_03.png"
}Why build two config.js? One is the default configuration information, the other is the customized version configuration information.
After the new building is completed, we will introduce them into the page, how to quote them, which one to quote, so entangled ah.
- First, we build the index.html page.
- Then introduce JavaScript dynamically[ Write links here.]
After reading this article, I decided to use document.writeln(), and you can find out what's different from document.write().
But which config file should be introduced? We need to decide which bank it is. Let's assume that the name of the bank is in the header. Okay, that's all right.
- indexOf() determines the location of the first occurrence of a string
- Clear your mind and start coding
($("header").text().indexOf("Industrial and Commercial Bank of China") > -1) ?
document.writeln("<script src=\"./js/config1.js\"><\/script>")
:
document.writeln("<script src=\"./js/config2.js\"><\/script>");Put the code into the page to complete the task. The complete code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/jquery-2.1.1.min.js"></script>
<script>
($("header").text().indexOf("Industrial and Commercial Bank of China") > -1) ?
document.writeln("<script src=\"./js/config1.js\"><\/script>")
:
document.writeln("<script src=\"./js/config2.js\"><\/script>");
</script>
</head>
<body>
<header> Industrial and Commercial Bank of China </header>
<div>
<a href="">I'm button 1.</a>
<a href="">I'm button 2.</a>
<a href="">I'm button 3.</a>
<p> I'm button 4. </p>
<button> I'm button 5. </button>
<img class="img1">
</div>
<script>
$("header").text().indexOf("Industrial and Commercial Bank of China") > -1 ?
document.writeln("I'm ICBC.") : document.writeln("I'm not ICBC.");
console.log($("header").text());
console.log(config);
var btncolor = config.btncolor;
console.log(btncolor);
$("a,p,button").css("color", btncolor);
var img1 = config.img1;
console.log(img1);
$(".img1").attr('src', img1);
</script>
</body>
</html>** The second way is to have only one file config.js**
We felt config.js had fewer configuration items and had to include all of them in one file.
var config = {
first: {
// Change the global button color
btncolor: "yellow",
// Configuration of coupons and consent Icon
img1: "../images/icon_01.png",
img2: "../images/icon_02.png",
img3: "../images/icon_03.png"
},
second: {
// Change the global button color
btncolor: "red",
// Configuration of coupons and consent Icon
img1: "../images/icon_03.png",
img2: "../images/icon_02.png",
img3: "../images/icon_01.png"
}
}But at this time the method is basically the same as above, I will not elaborate, the direct code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/jquery-2.1.1.min.js"></script>
<script src="./js/config.js"></script>
</head>
<body>
<header>
//Industrial and Commercial Bank
</header>
<div>
<a href="">I'm button 1.</a>
<a href="">I'm button 2.</a>
<a href="">I'm button 3.</a>
<p> I'm button 4. </p>
<button> I'm button 5. </button>
<img class="img1">
</div>
<script>
$("header").text().indexOf("Industrial and Commercial Bank of China") > -1 ?
document.writeln("I'm ICBC.") :
document.writeln("I'm not ICBC.");
var a = config.first,
b = config.second,
c = $("header").text().indexOf("Industrial and Commercial Bank of China") > -1;
console.log($("header").text());
if (c) {
console.log(a);
var btncolor = a.btncolor;
console.log(btncolor);
$("a,p,button").css("color", btncolor);
var img1 = a.img1;
console.log(img1);
$(".img1").attr('src', img1);
} else {
console.log(b);
var btncolor = b.btncolor;
console.log(btncolor);
$("a,p,button").css("color", btncolor);
var img1 = b.img1;
console.log(img1);
$(".img1").attr('src', img1);
}
</script>
</body>
</html>