更改 fontawesome 图标会丢失“title”元素 元素），通过 ch... 我正在尝试通过更改结果上的类来更改 fontawesome 图标（它会自动从具有 <i> 属性的 title 元素切换到具有嵌套 <svg> 元素的 <title> 元素） <svg>元素。不过，我还需要更新嵌套的 <title> 元素，但我发现更改类将导致嵌套的 <title> 元素被删除。我应该如何更新 <title> 元素？我还可以补充一点，我没有使用任何模块，我只是使用来自 CDN 的 fontawesome 脚本： <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/all.min.js"></script> const getIconOuterHTML = () => { return new Promise((resolve) => { setTimeout(() => { const iconEl = document.querySelector('#commentIcon'); let output = $('<div>').text(iconEl.outerHTML).html(); //console.log(output); output = output.replaceAll('&gt;&lt;', '&gt;\n&lt;'); resolve(output); }, 200); }); } $(document).ready(async () => { document.querySelector('#htmlRepresentation').innerHTML = await getIconOuterHTML(); }); $(document).on('click', '#switchIconBtn', async (ev) => { const iconEl = document.querySelector('#commentIcon'); const titleElId = iconEl.getAttribute('aria-labelledby'); const titleEl = iconEl.querySelector(`#${titleElId}`); if( iconEl.classList.contains('fa-comment-dots') ) { iconEl.classList.remove('fa-comment-dots'); iconEl.classList.add('fa-comment-medical'); if(titleEl !== null){ titleEl.textContent = 'add a comment'; } else { alert('could not find title element'); } } else { iconEl.classList.remove('fa-comment-medical'); iconEl.classList.add('fa-comment-dots'); if(titleEl !== null){ titleEl.textContent = 'edit comment'; } else { alert('could not find title element'); } } document.querySelector('#htmlRepresentation').innerHTML = await getIconOuterHTML(); }); <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/all.min.js"></script> <i class="fas fa-comment-medical" title="add a comment" id="commentIcon"></i> <div><button id="switchIconBtn" style="margin-top: 15px;">Switch icon and title</button></div> <div>Resulting HTML:</div> <pre id="htmlRepresentation"></pre> 正如您在生成的 HTML 表示中看到的那样，单击更改图标类的按钮将导致 <title> 元素被删除。我应该如何更新标题？ 现在检查 const getIconOuterHTML = () => { return new Promise((resolve) => { setTimeout(() => { const iconEl = document.querySelector('#commentIcon'); let output = $('<div>').text(iconEl.outerHTML).html(); //console.log(output); output = output.replaceAll('&gt;&lt;', '&gt;\n&lt;'); resolve(output); }, 200); }); } $(document).ready(async () => { document.querySelector('#htmlRepresentation').innerHTML = await getIconOuterHTML(); }); $(document).on('click', '#switchIconBtn', async (ev) => { const iconEl = document.querySelector('#commentIcon'); const titleElId = iconEl.getAttribute('aria-labelledby'); const titleEl = iconEl.querySelector(`#${titleElId}`); if( iconEl.classList.contains('fa-comment-dots') ) { iconEl.classList.remove('fa-comment-dots'); iconEl.classList.add('fa-comment-medical'); if(titleEl !== null){ titleEl.textContent = 'add a comment'; } else { alert('could not find title element'); } } else { iconEl.classList.remove('fa-comment-medical'); iconEl.classList.add('fa-comment-dots'); if(titleEl !== null){ titleEl.textContent = 'edit comment'; } else { alert('could not find title element'); } } // Manually update title const newTitle = document.createElement('title'); newTitle.textContent = titleEl.textContent; iconEl.querySelector('svg').appendChild(newTitle); document.querySelector('#htmlRepresentation').innerHTML = await getIconOuterHTML(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/all.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet"/> <i class="fas fa-comment-medical" title="add a comment" id="commentIcon"></i> <div> <button id="switchIconBtn" style="margin-top: 15px;">Switch icon and title</button> </div> <div>Resulting HTML:</div> <pre id="htmlRepresentation"></pre>

问题描述 投票：0回答：1

我正在尝试通过更改结果上的类来更改 fontawesome 图标（它会自动从具有 

<i>
属性的 
title
元素切换到具有嵌套 
<svg>
元素的 
<title>
元素） 
<svg>
元素。不过，我还需要更新嵌套的 
<title>
元素，但我发现更改类将导致嵌套的 
<title>
元素被删除。我应该如何更新 
<title>
元素？我还可以补充一点，我没有使用任何模块，我只是使用来自 CDN 的 fontawesome 脚本：

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/all.min.js"></script>


const getIconOuterHTML = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const iconEl = document.querySelector('#commentIcon');
      let output = $('<div>').text(iconEl.outerHTML).html();
      //console.log(output);
      output = output.replaceAll('&gt;&lt;', '&gt;\n&lt;');
      resolve(output);
    }, 200);
  });
}

$(document).ready(async () => {
  document.querySelector('#htmlRepresentation').innerHTML = await getIconOuterHTML();
});

$(document).on('click', '#switchIconBtn', async (ev) => {
  const iconEl = document.querySelector('#commentIcon');
  const titleElId = iconEl.getAttribute('aria-labelledby');
  const titleEl = iconEl.querySelector(`#${titleElId}`);
  if( iconEl.classList.contains('fa-comment-dots') ) {
    iconEl.classList.remove('fa-comment-dots');
    iconEl.classList.add('fa-comment-medical');
    if(titleEl !== null){
      titleEl.textContent = 'add a comment';
    } else {
      alert('could not find title element');
    }
  } else {
    iconEl.classList.remove('fa-comment-medical');
    iconEl.classList.add('fa-comment-dots');
    if(titleEl !== null){
      titleEl.textContent = 'edit comment';
    } else {
      alert('could not find title element');
    }
  }
  document.querySelector('#htmlRepresentation').innerHTML = await getIconOuterHTML();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/all.min.js"></script>
<i class="fas fa-comment-medical" title="add a comment" id="commentIcon"></i>

<div><button id="switchIconBtn" style="margin-top: 15px;">Switch icon and title</button></div>
<div>Resulting HTML:</div>
<pre id="htmlRepresentation"></pre>

正如您在生成的 HTML 表示中看到的那样，单击更改图标类的按钮将导致 

<title>
元素被删除。我应该如何更新标题？

javascript font-awesome
1个回答
0
投票

现在检查

const getIconOuterHTML = () => {
            return new Promise((resolve) => {
                setTimeout(() => {
                    const iconEl = document.querySelector('#commentIcon');
                    let output = $('<div>').text(iconEl.outerHTML).html();
                    //console.log(output);
                    output = output.replaceAll('&gt;&lt;', '&gt;\n&lt;');
                    resolve(output);
                }, 200);
            });
        }

        $(document).ready(async () => {
            document.querySelector('#htmlRepresentation').innerHTML = await getIconOuterHTML();
        });

        $(document).on('click', '#switchIconBtn', async (ev) => {
            const iconEl = document.querySelector('#commentIcon');
            const titleElId = iconEl.getAttribute('aria-labelledby');
            const titleEl = iconEl.querySelector(`#${titleElId}`);
            if( iconEl.classList.contains('fa-comment-dots') ) {
                iconEl.classList.remove('fa-comment-dots');
                iconEl.classList.add('fa-comment-medical');
                if(titleEl !== null){
                    titleEl.textContent = 'add a comment';
                } else {
                    alert('could not find title element');
                }
            } else {
                iconEl.classList.remove('fa-comment-medical');
                iconEl.classList.add('fa-comment-dots');
                if(titleEl !== null){
                    titleEl.textContent = 'edit comment';
                } else {
                    alert('could not find title element');
                }
            }

            // Manually update title
            const newTitle = document.createElement('title');
            newTitle.textContent = titleEl.textContent;
            iconEl.querySelector('svg').appendChild(newTitle);
            document.querySelector('#htmlRepresentation').innerHTML = await getIconOuterHTML();
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet"/>

    <i class="fas fa-comment-medical" title="add a comment" id="commentIcon"></i>
    <div>
        <button id="switchIconBtn" style="margin-top: 15px;">Switch icon and title</button>
    </div>
    <div>Resulting HTML:</div>
    <pre id="htmlRepresentation"></pre>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.