|
@@ -10,7 +10,7 @@
|
|
|
|
|
|
<div class="faq-content">
|
|
|
<div class="row px-0 mx-0">
|
|
|
-
|
|
|
+
|
|
|
<div class="col-lg-6">
|
|
|
<h1 class="h3"><i class="fas fa-pen mr-3 mb-3"></i>{{ title }}</h1>
|
|
|
|
|
@@ -19,17 +19,27 @@
|
|
|
<div>
|
|
|
<ul id='qaData1'></ul>
|
|
|
</div>
|
|
|
+ <div class="text-center">
|
|
|
+
|
|
|
+ <button style="border: none; background: none; outline: none;" onclick="addQa();"><i
|
|
|
+ class="addfaq fas fa-plus-circle"></i></button>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-6">
|
|
|
- <div class="faq-editor">
|
|
|
+
|
|
|
+ <div class="card faq-editor p-3">
|
|
|
+ <div class="text-right mb-3">
|
|
|
+ <i class="close_edit_faq fas fa-times"></i>
|
|
|
+ </div>
|
|
|
<input type="text" class="form-control mb-3 w-100" id="input_q"
|
|
|
placeholder="EX:小寶優居的規劃師服務和一般的室內設計有什麼不同嗎?" />
|
|
|
<div><textarea id='input_a'></textarea></div>
|
|
|
<div class="mt-4 d-flex justify-content-end">
|
|
|
<div>
|
|
|
- <button class="btn faq-btn" onclick="addQa();">新增</button>
|
|
|
- <button class="btn faq-btn" onclick="saveQa();">修改項目</button>
|
|
|
+ <!-- <button class="btn faq-btn" onclick="addQa();">新增</button> -->
|
|
|
+ <!-- <button class="btn faq-btn" onclick="saveQa();">修改項目</button> -->
|
|
|
<button class="btn faq-btn" onclick="removeQa();">移除項目</button>
|
|
|
<button class="btn faq-btn" onclick="writeAllQa();">完成儲存</button>
|
|
|
</div>
|
|
@@ -41,18 +51,38 @@
|
|
|
|
|
|
|
|
|
<style>
|
|
|
- .faq-editor{
|
|
|
- position:sticky !important;
|
|
|
+ .addfaq {
|
|
|
+ color: #ADB5BD;
|
|
|
+ font-size: 32px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .addfaq:hover {
|
|
|
+ color: grey;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .close_edit_faq {
|
|
|
+ font-size: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .faq-editor {
|
|
|
+ position: sticky !important;
|
|
|
top: 21px;
|
|
|
}
|
|
|
+
|
|
|
#qaData1 li {
|
|
|
vertical-align: center;
|
|
|
- list-style-type:none;
|
|
|
+ list-style-type: none;
|
|
|
}
|
|
|
- ul{
|
|
|
+
|
|
|
+ ul {
|
|
|
padding-inline-start: 0px !important;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
#qaData1 tr {
|
|
|
border: inset 2px
|
|
|
}
|
|
@@ -66,21 +96,22 @@
|
|
|
/* border-collapse: unset; */
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- table{
|
|
|
+
|
|
|
+ table {
|
|
|
border-collapse: unset;
|
|
|
width: 100%;
|
|
|
}
|
|
|
+
|
|
|
.faq-btn {
|
|
|
background-color: rgb(179, 179, 179);
|
|
|
color: white;
|
|
|
transition: all 0.3s;
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
- .faq-btn:hover{
|
|
|
+
|
|
|
+ .faq-btn:hover {
|
|
|
background-color: grey;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
</style>
|
|
|
<script>
|
|
|
|
|
@@ -159,20 +190,48 @@
|
|
|
});
|
|
|
|
|
|
});
|
|
|
+ $(".faq-editor").hide();
|
|
|
+
|
|
|
|
|
|
function setTarget() {
|
|
|
+ $(".faq-editor").fadeIn();
|
|
|
$('.qa_q').css("background-color", "white");
|
|
|
$(this).css("background-color", "lightpink");
|
|
|
targetItem = $(this);
|
|
|
$("#input_q").val($(this).children().html());
|
|
|
$("#input_a").val($(this).next().children().html()).trigger('change');
|
|
|
- $('html, body').animate({ scrollTop: '0px' }, 300);
|
|
|
+ // $('html, body').animate({ scrollTop: '0px' }, 300);
|
|
|
}
|
|
|
|
|
|
+ $(".close_edit_faq").click(function () {
|
|
|
+ $(".faq-editor").fadeOut();
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
function addQa() {
|
|
|
- $('#qaData1').append("<li data-si='" + i + "''><table><tr class='qa_q'><td>" + $("#input_q").val() + "</td></tr><tr class='qa_a'><td>" + $("#input_a").val() + "</td></tr></table></li>");
|
|
|
+
|
|
|
+ var QaItem = document.getElementById('qaData1');
|
|
|
+
|
|
|
+ $('#qaData1').append("<li data-si='" + i + "''><table><tr class='qa_q'><td></td></tr><tr class='qa_a'><td></td></tr></table></li>");
|
|
|
$('.qa_a').hide();
|
|
|
- $('.qa_q').dblclick(setTarget);
|
|
|
+ $('.qa_q').click(setTarget);
|
|
|
+
|
|
|
+ $(".qa_q").trigger("click");
|
|
|
+
|
|
|
+ $("#input_q").focus();
|
|
|
+
|
|
|
+ // QaItem.lastChild.innerHTML.triggerHandler('click');
|
|
|
+
|
|
|
};
|
|
|
|
|
|
function saveQa() {
|
|
@@ -181,10 +240,21 @@
|
|
|
};
|
|
|
|
|
|
function removeQa() {
|
|
|
- targetItem.parent().parent().parent().remove()
|
|
|
+ // targetItem.parent().parent().parent().remove()
|
|
|
+ var r = confirm("確定要刪除此作品?");
|
|
|
+ if (r == true) {
|
|
|
+ targetItem.parent().parent().parent().remove();
|
|
|
+ writeAllQa();
|
|
|
+ $(".faq-editor").fadeOut();
|
|
|
+ }
|
|
|
};
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
function writeAllQa() {
|
|
|
+
|
|
|
+ targetItem.children().html($("#input_q").val());
|
|
|
+ targetItem.next().children().html($("#input_a").val());
|
|
|
+
|
|
|
qa = [];
|
|
|
for (i = 0; i < $('#qaData1 .qa_q').length; i++) {
|
|
|
qa.push({ q: $('#qaData1 .qa_q')[i].childNodes[0].innerHTML, a: $('#qaData1 .qa_a')[i].childNodes[0].innerHTML });
|