有什么辦法可以將div合并成一個div嗎？

我正在做一個專案，用戶可以在一個資訊串列中進行操作。我將用下面的代碼來解釋。

<div>/span>
  < div id="factmarker1" onmouseup="factFunction(1)"> 
     <b class="fact-num"/span> id="fact-num1"> 1< /b><mark id="fact1"/span>> 地球是球形的</mark>。
  </div>/span>
  < div id="factmarker2" onmouseup="factFunction（2）">
     <b class="fact-num"/span> id="fact-num2"> 2< /b><mark id="fact2"/span>> 太空中沒有重力</mark>。
  </div>/span>
  < div id="factmarker3" onmouseup="factFunction（3）">
     <b class="fact-num"/span> id="fact-num3"> 3</b> <mark id="fact3"/span>> 地球是由更多的水組成的</mark>。
  </div>/span>
  < div id="factmarker4" onmouseup="factFunction（4）">
     <b class="fact-num"/span> id="fact-num4"> 4</b> <mark id="fact4"> 每四年有一個農歷年</mark> 
  </div>/span>
  < div id="factmarker5" onmouseup="factFunction（5）">
     <b class="fact-num"/span> id="fact-num5"> 5< /b><mark id="fact5"/span>> 每個農歷年有366天</mark>。
  </div>/span>
  < div id="factmarker6" onmouseup="factFunction（6）"> 
     <b class="fact-num"/span> id="fact-num6"> 6< /b><mark id="fact6"/span>> 地球是球形的</mark>。
  </div>/span>
  < div id="factmarker7" onmouseup="factFunction（7）">
     <b class="fact-num"/span> id="fact-num7"/span>> 7< /b><mark id="fact7"/span>> 地球是球形的</mark>。
  </div>/span>
</div>/span>
<div id="previewFact"/span>> </div>>

現在這是很直接的。如果用戶點擊或突出任何一個事實，就會彈出一個由javascript啟用的選項卡，用戶可以選擇做很多事情，如復制、保存或分享每個事實。如果用戶高亮顯示事實5并選擇保存它，預覽提示會顯示如下內容：

/* 事實5 每個農歷年有366天

現在我的問題是：我希望能夠讓用戶同時突出顯示多個事實，但我找不到這樣做的方法。如果用戶發現事實1到4很有趣，并將其高亮顯示，我希望預覽能像這樣：

?

/*
事實1至4

1 地球是球形的
2 太空中沒有引力
3 地球是由更多的水組成的
4 每四年有一個農歷年
*/

用戶還應該能夠選擇任何多個事實。另外，這些事實是用PHP從資料庫中呼叫出來的，所以，我不知道有多少事實或內容是什么。

我已經嘗試使用window.getSelection()方法。我試著使用 "fact-num "類，這樣當我得到高亮區域的內容時，我就可以搜索里面的類了--像這樣：

function factFunction(factNum) { var sel = window.getSelection（）。 var factNumLength = sel.querySelectorAll(' .fact-num').length。 if(factNumLength > 1){ //checking if it is a multiple highlight or not. var factStart = sel.querySelectorAll('.fact-num')[0].innerHTML。 var factStop = sel.querySelectorAll('.fact-num')[factNumLength - 1].innerHTML。 var preview = "Fact " factStart " to " factStop; preview = "<br/>" sel.toString()。 document.getElementById('previewFact').innerHTML = preview。 }else{ var preview = "Fact" factNum; preview = "<br/>" sel.toString（）。 document.getElementById('previewFact').innerHTML = preview。 } }

這不是整個代碼塊，因為它要長得多，但這是整個事情的一般結構，它沒有作業。我不知道我是否應該使用window.getSelection()的值，因為我正在使用它。

我非常感謝任何幫助，因為我已經花了整個昨天和今天的大部分時間來尋找答案。

謝謝你

編輯

只是為了讓我能正確理解。 當像這樣突出顯示。 。 它應該顯示這個。

uj5u.com熱心網友回復：

我沒能在規范中找到Selection提供querySelectorAll的地方，但即使它存在，containsNode用true表示partial可能是更好的選擇。

此外，您希望利用事件委托而不是將事件處理程式附加到每個元素上。這樣，您就可以更靈活地處理您想要應用的邏輯。

通過 data- 屬性，您可以為元素提供一些額外的語意資訊，例如您的事實 ID。

我在displayFactsResult中克隆了事實元素，但你肯定可以再次改變它以匹配你所期望的輸出。

最終的代碼可能看起來像這樣（有進一步的評論，說明代碼的每一部分做什么）：

function displayFactsResult(array) {
  const previewFact = document.getElementById("previewFact"/span>) 。

  //清空事實預覽。
  previewFact.innerHTML = ''。

  //創建選擇了多少個資訊。
  const infoNode = document.createElement('div')
  if (array.length == 1) {
    infoNode.textContent = 'Fact '   array[0].dataset.fact >。
  } else if (array.length > 1) {
    infoNode.textContent = '事實'   array[0].dataset。 fact   ' to '   array[array. length-1].dataset.fact。
  }
  previewFact.appendChild(infoNode)

  ///克隆每個被選中的事實并將其追加到預覽中。
  array.forEach(node => {
    previewFact.appendChild(node.cloneNode(true))。
  })

}

//使用事件委托而不是將事件處理程式附加到每個元素上。
document.querySelector('.fact')。 addEventListener('mouseup', (e) =>/span> {

  //遍歷DOM，直到達到`data-fact`或`.fact`元素為止。
  let element = e.target。
  while (element != e.currentTarget && !element.dataset.fact) {
    element = element.parentNode;
  }

  //獲得選擇。
  var sel = window.getSelection（）。

  //獲得所有元素，并通過選擇中的元素進行過濾。
  var factsInSelection = Array.from(document. querySelectorAll('[data-fact]')
    .filter(node => {
      return sel.containsNode(node, true)
    });

  if (factsInSelection.length > 0) {
    //如果至少有一個事實被選中，將其傳遞給顯示函式。
    displayFactsResult(factsInSelection)
  } else if (element.dataset.fact) {
    //如果我們停止遍歷的元素有`data-fact`就用這個來顯示。
    displayFactsResult([元素])
  } else {
    displayFactsResult([] )
  }
})

<div class=" facts"> 
  < div id="factmarker1" data-fact="1">/span>
    <b class="fact-num"/span> id="fact-num1"/span>> 1< /b><mark id="fact1"/span>> 地球是球形的</mark>。
  </div>/span>
  < div id="factmarker2" data-fact="2">/span>
    <b class="fact-num"/span> id="fact-num2"/span>> 2< /b><mark id="fact2"/span>> 太空中沒有重力</mark>。
  </div>/span>
  < div id="factmarker3" data-fact="3">/span>
    <b class="fact-num"/span> id="fact-num3"/span>> 3</b> <mark id="fact3"/span>> 地球是由更多的水組成的</mark>。
  </div>/span>
  < div id="factmarker4" data-fact="4">/span>
    <b class="fact-num"/span> id="fact-num4"/span>> 4</b> <mark id="fact4"> 每四年有一個農歷年</mark> 
  </div>/span>
  < div id="factmarker5" data-fact="5">/span>
    <b class="fact-num"/span> id="fact-num5"/span>> 5< /b><mark id="fact5"/span>> 每個農歷年有366天</mark>。
  </div>/span>
  < div id="factmarker6" data-fact="6">/span>
    <b class="fact-num"/span> id="fact-num6"/span>> 6< /b><mark id="fact6"/span>> 地球是球形的</mark>。
  </div>/span>
  < div id="factmarker7" data-fact="7">/span>
    <b class="fact-num"/span> id="fact-num7"/span>> 7< /b><mark id="fact7"/span>> 地球是球形的</mark>。
  </div>/span>
</div>/span>
<hr> 
<div id="previewFact"> 
</div>/span>

uj5u.com熱心網友回復：

我更新了這個，使之成為一個包含事實ID和文本的物件陣列，該陣列檢查事實ID以避免重復，并將所有被點擊的事實保存到previewFact div.

span class="hljs-keyword">let savedFacts = [];

$('.fact').click(function() {

  let factText = $(this).children('mark').text() 。
  let factId = $(this).children(' .fact-num').text()。
  
  if (savedFacts.findIndex(x =>  x. id ==factId) == -1) {

    savedFacts.push({"id":factId," fact":factText})

  }
  
  $("#previewFact").html(savedFacts.map(function(elem){
        return `${elem.id} ${elem.fact}`。
    }).join("<br />") )。
  
});

<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>
<div>/span>
  < div id="factmarker1" class="fact"> 
     <b class="fact-num" id="fact-num1"> 1< /b><mark id="fact1"/span>> 地球是球形的</mark>。
  </div>/span>
  < div id="factmarker2" class="fact"> 
     <b class="fact-num" id="fact-num2">> 2< /b><mark id="fact2"/span>> 太空中沒有重力</mark>。
  </div>/span>
  < div id="factmarker3" class="fact" > 
     <b class="fact-num" id="fact-num3"> 3</b> <mark id="fact3"/span>> 地球是由更多的水組成的</mark>。
  </div>/span>
  < div id="factmarker4" class="fact" > 
     <b class="fact-num" id="fact-num4"> 4</b> <mark id="fact4"> 每四年有一個農歷年</mark> 
  </div>/span>
  < div id="factmarker5" class="fact"> 
     <b class="fact-num" id="fact-num5">> 5< /b><mark id="fact5"/span>> 每個農歷年有366天</mark>。
  </div>/span>
  < div id="factmarker6" class="fact" > 
     <b class="fact-num" id="fact-num6"> 6< /b><mark id="fact6"/span>> 地球是球形的</mark>。
  </div>/span>
  < div id="factmarker7" class="fact"> 
     <b class="fact-num"/span> id="fact-num7"> 7< /b><mark id="fact7"/span>> 地球是球形的</mark>。
  </div>/span>
</div>/span>
<br />/span>
<span>保存的事實：</span>/span>
<div id="previewFact"/span>> </div> 

標籤：

上一篇：x86_64匯編中的分段故障

下一篇：使用@OneToMany或@ManyToMany針對一個未映射的類：com.example.soasec.entities.User.role[com.example.soasec.entities.