JavaScript - 不显示文本手风琴中的标题答案

【问题标题】：JavaScript- Not showing the Title in Text AccordionJavaScript - 不显示文本手风琴中的标题
【发布时间】：2018-10-20 09:17:05
【问题描述】：

首先请看截图，这里我正在使用 Accordion 文本编辑器，您可以在其中添加标题和正文。

当我多次单击添加按钮然后显示为这种类型。不显示标题文本。我认为这是 JS 文件的问题。有什么解决办法吗？？提前致谢！

$(document).ready(function() {
	$('#Add_btn').click(function(){
		$('#accordion_body').append($('#editableDiv').html());    		
		var x = document.getElementById("accordion_input").value;
		document.getElementById("accordion_title").innerHTML = x;
	});    	
});

function myAccorFunction() {
    var Myaccordion = `
        <div class="Myacc" id="acc_main" contenteditable="false"
             class="accordion-main"
             style="position: relative;width: 98.5%; left: 9px;">
        </div>
        <div class="panel-group trash_removed" id="accordion" role="tablist"
             aria-multiselectable="true"
             style="margin-bottom: 7px;margin-top: 10px"
             contenteditable="false">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne"
                 contenteditable="false">
              <h4 class="panel-title">
                <a id="accordion_title" role="button" data-toggle="collapse"
                   data-parent="#accordion" href="#expandingCol"
                   aria-expanded="false" aria-controls="collapseOne">
                </a><div class="icon_area">
                <i class="fa fa-edit" data-toggle="collapse"
                   data-parent="#accordion" href="#collapseOne"
                   aria-expanded="false" aria-controls="collapseOne">
                </i>
                <i onclick="myfundelete()" class="fa fa-trash">
                </i>
              </div>
            </h4>
          </div>
          <div id="expandingCol" class="panel-collapse collapse"
               role="tabpanel" aria-labelledby="headingOne"> 
            <div id="accordion_body" class="panel-body" >
            </div>
          </div>
        </div>
      </div>
    `;
    $("#editor").append(Myaccordion);
}

<button onclick="myAccorFunction()" id="Add_btn"
        class="btn btn-primary note-image-btn" role="button"
        data-toggle="collapse" data-parent="#accordion"
        href="#collapseOne" aria-expanded="true"
        aria-controls="collapseOne">Add</button>

【问题讨论】：

您在重复 ID。不确定这是否是您唯一的问题，但这绝对是网络标准方面的问题。 ID 不应在单个文档中重复。
首先你为什么要从同一个按钮以不同的方式调用两个不同的函数？什么是editableDiv和editor？

标签： javascript jquery html node.js

【解决方案1】：

您似乎不止一次使用相同的元素 ID #accordion_title。由于浏览器假定 element ID is unique within a page，document.getElementById("accordion_title").innerHTML = x; 只会更改具有该 ID 的第一个元素的 innerHTML，但不会更改添加按钮附加的后续元素。

尝试对标题文本元素使用类名而不是 ID，然后遍历该类的每个元素以更改其内部 HTML。

$('.accordion_title').each(function() {
    $(this).html($('#accordion_input').val());
});

【讨论】：

很高兴我能帮上忙。