8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

如何更改具有多个类的 div 元素的文本?

Dibya Mishra 1月前

45 0

我是一名初级程序员,我正在使用 Tutor LMS Pro 插件创建一个网站。该插件允许您创建一个带有课程的面板,不幸的是它没有完全翻译成我的母语

我是一名初级程序员,我正在使用 Tutor LMS Pro 插件创建一个网站。
此插件允许您创建包含课程的面板,但遗憾的是它没有完全翻译成我的母语。我尝试使用 JavaScript 翻译单个标题,但不知为何它不起作用。
我之前曾翻译过另一个与我当前尝试翻译的元素 (tutor-mb-24) 具有相同类的元素。
因此,两个元素都以相同的方式进行翻译。我认为,如果第二个元素共享 tutor-mb-24 类,但也有其他类,则代码将仅适用于它,但它根本不起作用,并且不如仅为另一个元素翻译 tutor-mb-24 类的代码。
我不太明白问题的本质。

我正在使用的元素:

<div class="tutor-col-12 tutor-col-md-8 tutor-col-lg-9">
  <div class="tutor-dashboard-content">
    <div class="tutor-fs-5 tutor-fw-medium tutor-color-black tutor-capitalize-text tutor-mb-24 tutor-dashboard-title"
       >
       Text I want to change
    </div>
  </div>
</div>

我试过:

document.getElementsByClassName("tutor-fs-5 tutor-fw-medium tutor-color-black tutor-capitalize-text tutor-mb-24 tutor-dashboard-title").textContent="New Text";
document.addEventListener('DOMContentLoaded', function() {
    var x1 = document.getElementsByClassName("tutor-fs-5 tutor-fw-medium tutor-color-black tutor-capitalize-text tutor-mb-24 tutor-dashboard-title");
    if (x1.length > 0) {
        x1[0].innerHTML = 'New Text';
    }

});
帖子版权声明 1、本帖标题:如何更改具有多个类的 div 元素的文本?
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Dibya Mishra在本站《javascript》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 有很多方法可以做到这一点; 如果有能力 向 HTML ( <div id="css-identifier"> ) => (

    )
    使用 JavaScript 中 uniqueId 访问它 const uniqueID = document.getElementById('uniqueID') 如果您可以访问 HTML 代码 并可以添加 ,这将是最简单的方法。MDN id getElementById()

    选择器: querySelector() querySelectorAll() getElementsByClassName() querySelector - 获取元素列表的第一次出现。 const uniqueID = querySelector('#uniqueID')

    querySelectorAll 获取每个元素的节点列表 - const classItems = document.querySelectorAll('.class-list-name') => 返回一个 nodeList .

    getElementsByClassName() 返回元素的 HTML 列表 - const classList = document.getElementsByClassName('class-list-name') 后两个列表可以进行迭代,其中 document.querySelector('.element') 将为您提供 元素列表的 第一次出现

    如果您需要元素列表中的不同元素,您可以循环遍历元素并获取 元素列表或元素数组中该元素的 索引

    您可以创建一个辅助函数来为您执行此操作并调用它,传递方法内代码块所需的适当参数。

    请参阅代码片段中的进一步注释

    const elements = document.getElementsByClassName('tutor-fs-5');
    const secondElementString = "Some other text!"
    const thirdElementString = "Change the third elements textContent!"
    
    // helper function, pass in elements, index, string
    function changeTextUsingIndex(els, index, str) {
      // basic for let loop that iterates over the elements 
      for (let i = 0; i <= els.length; i++) {
        // conditional if index of for loop strict comparision of index of parameter passed in
        if (i === index) {
          // change the text to passewd in string
          els[i].textContent = str;
        }
      }
    }
    
    // call your method and pass in params
    // start at 0, second index would be 1 so we pass in 1 as the targeted index
    changeTextUsingIndex(elements, 1, secondElementString);
    changeTextUsingIndex(elements, 2, thirdElementString);
    <div class="tutor-col-12 tutor-col-md-8 tutor-col-lg-9">
      <div class="tutor-dashboard-content">
        <div class="tutor-fs-5 tutor-fw-medium tutor-color-black tutor-capitalize-text tutor-mb-24 tutor-dashboard-title">
          Text with same class
        </div>
        <div class="tutor-fs-5 tutor-fw-medium tutor-color-black tutor-capitalize-text tutor-mb-24 tutor-dashboard-title">
          Text with same class
        </div>
        <div class="tutor-fs-5 tutor-fw-medium tutor-color-black tutor-capitalize-text tutor-mb-24 tutor-dashboard-title">
          Text with same class
        </div>
      </div>
    </div>
  • @PoulBak 嗯,如果他想使用 id,这是一个可以引用元素并且在 DOM 中始终是唯一的属性,他只需将该属性添加到他想要定位的 HTML 中,例如:

    . Then in JS or CSS reference that ID to target that specific element. const uniqueID = document.querySelector('#uniqueId') or document.getElementById('uniqueId') See MDN for more info ID Selectors getElementById()
  • 使用 document.querySelector() 方法
    使用 CSS 语法...

    const div2change = document.querySelector('div.tutor-fs-5.tutor-fw-medium.tutor-color-black.tutor-capitalize-text.tutor-mb-24.tutor-dashboard-title');
    
    div2change.textContent = 'new text';
    <div class="tutor-col-12 tutor-col-md-8 tutor-col-lg-9">
      <div class="tutor-dashboard-content">
        <div class="tutor-fs-5 tutor-fw-medium tutor-color-black tutor-capitalize-text tutor-mb-24 tutor-dashboard-title"
           >
           Text I want to change
        </div>
      </div>
    </div>

    另一种方法:

    const div2change = document.querySelector('div.tutor-dashboard-content > div');
    
    div2change.textContent = 'new text';
    <div class="tutor-col-12 tutor-col-md-8 tutor-col-lg-9">
      <div class="tutor-dashboard-content">
        <div class="tutor-fs-5 tutor-fw-medium tutor-color-black tutor-capitalize-text tutor-mb-24 tutor-dashboard-title"
           >
           Text I want to change
        </div>
      </div>
    </div>
  • 我发现在这里使用 div 'div.tutor-d 其余的类对于 CSS 来说有点像 \'反模式\',就好像它们变成了一个

返回
作者最近主题: