كيفية كتابة كود اتش تي ام ال في جافا سكريبت
بداية تحتاج ان يكون لديك قالب HTML
ثم تحتاج ان تحوله الى متغير من خلال موقع الدبليو تووز
//https://wtools.io/html-to-javascript-converter
بقوم باستبدال الاماكن الخاصة بالمتغيرات بمتغير واحد مؤقت كما في الشكل
let html_template = '' +
'<div class="col-md-8 col-lg-6 col-xl-4 mb-3">' +
' <div class="course-box-wrap">' +
' <div class="course-box">' +
' <div class="course">' +
' <!--Bundle images-->' +
' </div>' +
' <a href="'+sample_v+'">' +
' <div class="card-header course-bundle-header pt-3">' +
' <p>'+sample_v+'</p>' +
' <small>'+sample_v+'</small>' +
' </div>' +
' </a>' +
' <div class="card-body">' +
' <div class="row course_bundle_box">' +
' <!--total price corses on this bundle-->' +
'' +
'' +
' <div class="col-md-12 mb-2">' +
' <div class="accordion" id="example_120">' +
' <a href="'+sample_v+'" target="_blank">' +
' <div class="card">' +
' <div class="card-header collapsed p-0" type="button" data-toggle="collapse" data-target="#course_120" aria-expanded="false" aria-controls="course_120">' +
' <img src="'+sample_v+'" alt="" class="img-fluid float-left min-height-50" width="60px;">' +
' <div class="row">' +
' <div class="col-md-12">' +
' <p class="text-muted m-0 cursor-pointer text-12">' +
' '+ sample_v+
' <b><span class="float-right d-block">$'+sample_v+'</span></b>' +
' </p>' +
' </div>' +
' </div>' +
' </div>' +
' </div>' +
' </a>' +
' </div>' +
' </div>' +
' ' +
' ' +
' </div>' +
' <div class="row bundle-arrow-down text-center box-shadow-0 cursor-pointer" id="bundle_arrow_down_1" onclick="toggleBundleCourses_f('+sample_v+', '+sample_v+')">' +
' <div class="col-12 p-1"><i class="fas fa-angle-down"></i></div>' +
' </div>' +
' <div class="row bundle-slider closed" id="gif_loader_1"></div>' +
' <!--Here is load more bundle-->' +
' <div class="row bundle-slider closed" id="course_of_bundle_1"></div>' +
' <hr class="mt-1">' +
' <div class="row">' +
' <div class="col-md-12">' +
' <div class="w-50 float-left text-left text-muted text-12">' +
' <div class="rating-row">' +
' <i class="fas fa-star filled text-warning"></i>' +
' <i class="fas fa-star filled text-warning"></i>' +
' <i class="fas fa-star filled text-warning"></i>' +
' <i class="fas fa-star filled text-warning"></i>' +
' <i class="fas fa-star filled text-warning"></i>' +
' <br>' +
' <span class="enrolled-num">' +
' ('+sample_v+' Students)' +
' </span>' +
' </div>' +
' </div>' +
' <div class="w-50 float-right text-right text-muted">' +
' <strike class="text-12">$'+sample_v+'</strike>' +
' $'+sample_v+' ' +
' </div>' +
' </div>' +
' </div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>' +
'';
console.log(html_template);
نقوم بانشاء اوبجكت مؤقت للقيم التي نريد تغييرها كما يلي
var values = {
bundleName: 'Joe',
numberOfCourses: 42,
numberOfStudents: 22,
originalPrice: 22,
discountedPrice: 22,
bundleLink: '#',
}
بعدها نحتاج ان نستخرج الاسماء بشكل دايناميكي
var names = [];
for(var k in values){
let key = k + "";
names[key] = '{'+k+'}';
}
console.log(names);
console.log(values[names.bundleLink]);
console.log(names.bundleLink);
بعدها نستبدل القالب بالقيم الجديدة كهذا
let html_template = '' +
'<div class="col-md-8 col-lg-6 col-xl-4 mb-3">' +
' <div class="course-box-wrap">' +
' <div class="course-box">' +
' <div class="course">' +
' <!--Bundle images-->' +
' </div>' +
' <a href="'+names.bundleLink+'">' +
' <div class="card-header course-bundle-header pt-3">' +
' <p>'+names.bundleName+'</p>' +
' <small>'+names.bundleContent+'</small>' +
' </div>' +
' </a>'
بعدها نستطيع تطبيق كود الاستبدال من خلال ريجيولار اكسبريشن بالشكل التالي
for (var value in values) {
html_template = html_template.replace(RegExp('{' + value + '}', 'g'), values[value])
}
$('.bundles-goes-here').prepend(html_template);
تهانينا لكم
