코딩 질문이 있어요ㅠㅠ
본문
<!-- POP만들기 -->
<div id="leaflet_app">
<!-- widget -->
<div class="widget_wrap full">
<div class="clfix widget">
<h4>POP만들기</h4>
<div class="widget-content" style="background-color:#c0c0c0">
<div id="leaflet_template">
<!-- htmldata -->
<style>
#leaflet_template > .tmpl > .wrap {width:100%; height:100%; background-color:#ffffff}
#leaflet_template > .tmpl > .wrap > .background {position:absolute; top:0; left:0; width:100%}
#leaflet_template > .tmpl > .wrap > .leaflet_subject {overflow:hidden; position:absolute; top:20mm; /* left:0mm; */ width:210mm; height:38mm; color:#fff !important; font-family:'GmarketSansBold'; font-size:20mm; line-height:40mm; text-align:right}
#leaflet_template > .tmpl > .wrap >.merge1 {width:794px;height:38px;background-color:#ff3823;display: inline-block;}
#leaflet_template > .tmpl > .wrap >.merge1 > .leaflet_desc {position:absolute; top:41.5mm; left:8mm; width:100%; color:#27a774; !important; font-family:'GmarketSansMedium'; font-size:12.2mm; line-height:10mm; text-align:left; letter-spacing:-2px; }
#leaflet_template > .tmpl > .wrap > .subject {position:absolute; top:240mm; left:8mm; width:210mm; color:#000 !important; font-family:'GmarketSansMedium'; font-size:14mm; line-height:20mm; text-align:left; /* letter-spacing:-1mm; */ /*text-shadow: -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 3px 3px #fff;*/}
#leaflet_template > .tmpl > .wrap > .image {position:absolute; top:70mm; left:30mm; width:150mm; height:150mm; color:#000 !important; font-family:'GmarketSansMedium'; font-size:17mm; line-height:20mm; text-align:center; letter-spacing:-1mm}
#leaflet_template > .tmpl > .wrap > .image > img {max-width:150mm; max-height:130mm; width:100%; height:100%}
#leaflet_template > .tmpl > .wrap > .price_sale {position:absolute; bottom:-2mm;right:8mm; width:210mm; color:#f40500; !important; font-family:'GmarketSansBold'; font-size:34mm; line-height:35mm; text-align:right; letter-spacing:-2mm}
#leaflet_template > .tmpl > .wrap > .price_sale > .won {margin-left:10px; font-family: 'GmarketSansBold'; font-size: 60px; color:#f40500; !important}
#leaflet_template > .tmpl > .wrap > .price > .won { color:#f40500; !important}
#leaflet_template > .tmpl > .wrap > .price {position:absolute; bottom:3mm; left:12mm; color:#999999 !important; font-family:'GmarketSansMedium'; font-size:12mm; line-height:24mm; text-align:left; /* letter-spacing:-1mm; */ text-decoration:line-through}
#leaflet_template > .tmpl > .wrap >.merge {position:absolute; bottom:58mm; left:9mm; width:230px;height:62px;background-color:#ff3823;border-radius: 6px; display:flex; align-items: center;flex-direction: column;justify-content: center;}
#leaflet_template > .tmpl > .wrap > .merge > .leaflet_option {width:100%; color:#fff !important; font-family:'GmarketSansMedium'; font-size:12mm; /* line-height:8mm; */ text-align:center; /* letter-spacing:-1mm;/ */padding: 10px 0 0 0;}
#leaflet_template > .tmpl > .wrap > .unit {position:absolute; bottom:60mm;background-color:#ff3823;}
@media print{
@page {size:portrait}
html, body {width:210mm !important; height:297mm !important}
}
</style>
<div class="tmpl vertical">
<div id="print-area" class="wrap" data-itemid="0">
<div class="background"><img src="/assets/leaflet/leaflet_bg_20.jpg" style="width:100%"></div>
<div class="leaflet_subject"></div>
<div class="merge1">
<div class="leaflet_desc"></div>
</div>
<div class="merge">
<div class="leaflet_option"></div>
</div>
<div class="price item_0_price"><span class='won'></span></div>
<div class="image item_0_image"><img src="/uploads/spop_imagedb/2021/04//b2e4a9d30bcb8aba4b04a40dc83d02b0.png"></div>
<div class="subject item_0_subject"></div>
<div class="price_sale item_0_price_sale"><span class='won'></span></div>
<div class="unit item_0_unit"></div>
</div>
</div>
<!-- //htmldata -->
</div>
</div>
</div>
</div>
<!-- //widget -->
</div>
<!-- //POP만들기 -->
<!-- 수정/삭제 모달 -->
<div class="modal select" id="modal_edit" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-xs">
<div class="modal-content">
<h4 class="modal-title dark align-center">수정하기</h4>
<div class="widget-content">
<div class="p-20">
<div class="row">
<div class="col-xs-5">
<div class="mb-15">
<span id="mf_image" class="image" style="display:inline-block; border:1px solid #ccc; padding:40px"><img src='/images/no_image.png' data-src="" width="100" height="100" style="width:100px; height:100px"></span>
</div>
<div>
<button type="button" onclick="leaflet.select_image.from_pc()" class="btn btn-white"><i class="fas fa-search"></i> 내사진</button>
<button type="button" onclick="leaflet.select_image.open()" class="btn btn-primary">라이브러리</button>
<input type="file" name="image_file" id="item_file" value="" style="display:none" accept="image/jpeg, image/png" onchange="leaflet.select_image.upload()">
</div>
</div>
<div class="col-xs-7">
<div class="mb-15">
<label for="mf_subject" class="form-label mb-5">제목</label>
<input type="text" id="mf_subject" name="mf_subject" class="form-control">
</div>
<div class="mb-15">
<label for="mf_desc" class="form-label mb-5">행사기간</label>
<input type="text" id="mf_desc" name="mf_desc" class="form-control">
</div>
<div class="mb-15">
<label for="mf_option" class="form-label mb-5">옵션</label>
<input type="text" id="mf_option" name="mf_option" class="form-control">
</div>
<div class="mb-15">
<label for="mf_unit" class="form-label mb-5">단위</label>
<input type="text" id="mf_item_unit" name="mf_unit" class="form-control">
</div>
<div class="row">
<div class="col-xs-6">
<div class="mb-15">
<label for="mf_item_price" class="form-label mb-5">정상가</label>
<input type="text" id="mf_item_price" name="mf_item_price" class="form-control">
</div>
</div>
<div class="mb-15">
<label for="mf_item_subject" class="form-label mb-5">상품명</label>
<input type="text" id="mf_item_subject" name="mf_item_subject" class="form-control">
</div>
<div class="mb-15">
<label for="mf_item_price_sale" class="form-label mb-5">할인가</label>
<input type="text" id="mf_item_price_sale" name="mf_item_price_sale" class="form-control">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">취소</button>
<button type="button" class="btn btn-primary" onclick="leaflet.item.update_value(); $('#modal_edit').modal('hide')"><i class='fas fa-check'></i> 수정하기</button>
</div>
</div>
</div>
</div>
<!-- //수정/삭제 선택 모달 -->
<!-- 이미지 라이브러리 리스트 모달 -->
<div class="modal select" id="modal_get_imagedb" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<h4 class="modal-title dark align-center">이미지 라이브러리</h4>
<div class="widget-content">
<div class="search">
<form onsubmit="return search_imagedb_modal(this)">
<select class="select2" id="imagedb_category1" data-link="imagedb_category2" onchange="change_category(this)">
<option value=''>전체분류</option>
<?php
//
$parent_no = 0;
if ($this->input->get("category_no")) {
foreach ($imagedb_category_list as $key => $v) {
if ($v['category_no'] == $this->input->get("category_no")) {
$parent_no = $v['parent_no'];
}
}
}
foreach ($imagedb_category_list as $key => $v) {
if ($v['parent_no'] == '0') {
echo "<option value='".$v['category_no']."' ".(($parent_no == $v['category_no']) ? "selected='selected'" : "").">".$v['name']."</option>";
}
}
?>
</select>
<select class="select2" id="imagedb_category2" name="category_no">
<option value="">소분류</option>
</select>
<input type="text" class="form-control input-width-large inline" name="subject" placeholder="상품이름 입력" value="">
<input type="submit" class="btn btn-default" id="check" value="조회">
</form>
</div>
<div class="list_wrap"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="$('#modal_get_imagedb').modal('hide'); $('#modal_select_image').modal('show')">뒤로</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal"><i class='fas fa-times'></i> 닫기</button>
</div>
</div>
</div>
</div>
<!-- //이미지 라이브러리 리스트 모달 -->
<!-- leaflet -->
<script>
<?php
if ($leaflet['data']) {
//echo "leaflet.data = {$leaflet['data']};";
}
?>
leaflet.data = {
subject: {
text: "단하루만!\n추천특가",
color: "#ffffff",
font: "GmarketSansBold",
vertical: "N",
square: "N"
},
option: {
text: "한정상품",
color: "#fff",
font: "GmarketSansMedium",
},
desc: {
text: "00월 00일 0요일",
color: "#27a774",
font: "GmarketSansMedium",
},
item: [
{
subject: {
text: "양배추 1통",
color: "#000000",
font: "GmarketSansMedium",
},
price: {
text: "10,900원",
color: "#999999",
font: "GmarketSansMedium",
},
price_sale: {
text: "12,990원",
color: "#f40500",
font: "GmarketSansBold",
},
unit: {
text: "1통",
color: "#000000",
font: "GmarketSansMedium",
},
image: "/uploads/spop_imagedb/2021/04//b2e4a9d30bcb8aba4b04a40dc83d02b0.png"
}
]
};
$("#print-area").click(function(){
var itemid = $(this).data('itemid');
leaflet.item.selected_itemid = itemid;
console.log("itemid : " + itemid);
$("#mf_subject").val(leaflet.data.subject.text);
$("#mf_desc").val(leaflet.data.desc.text);
$("#mf_item_subject").val(leaflet.data.item[itemid].subject.text);
$("#mf_item_price_sale").val(leaflet.data.item[itemid].price_sale.text);
$("#mf_item_unit").val(leaflet.data.item[itemid].unit.text);
if (leaflet.data.item[itemid].image == "") {
$("#mf_image img").attr('src', '/images/no_image.png');
} else {
$("#mf_image img").attr('src', leaflet.data.item[itemid].image);
$('#modal_edit .image').css({
'padding': '10px'
});
$('#modal_edit .image img').data('src', leaflet.data.item[itemid].image);
$('#modal_edit .image img').css({
'width': '200px',
'height': '200px'
});
}
$("#modal_edit").modal();
});
</script>
<!-- //leaflet -->
unit에 값을 받아서 넣고 싶은데 unit만 값이 들어오지 않아요 문제가 무엇일까요ㅠㅠㅠ 해결방안 좀 알려주세요 코딩 고수님들ㅠㅠ
답변 1
다음을 참고하셔서 원하시는 형식으로 코딩을 하시면 가능하지 않을까 합니다.
<div class="mb-15">
<label for="mf_unit" class="form-label mb-5">단위</label>
<input type="text" id="mf_unit" name="mf_unit" class="form-control">
</div>
leaflet.data.item[0].unit = {
text: "포장",
color: "#000000",
font: "GmarketSansMedium"
};
