将 jQuery 代码翻译成普通的 JavaScript for Google Tag Manager

Translate jQuery code in plain JavaScript for Google Tag Manager

本文关键字：for JavaScript Google Tag Manager 代码 jQuery 翻译      更新时间：2023-09-26

我需要将此jQuery代码翻译成javascript以在Google跟踪代码管理器中使用，但是我在翻译时遇到了一些麻烦：

$('.book-wrapper').click(function() {return( $('.book-title', this).text() )});

任何帮助都非常感谢。谢谢！

看起来是这样的，我认为：

    var els = document.querySelector('.book-wrapper');
    for (var ix = 0; ix < els.length; ix++) {
      els[ix].addEventListener('click', getText);
    }
    function getText(e) {
      var titles = e.target.querySelector('.book-title');
      return titles[0].innerText || null;
    }
<div class="book-wrapper">
  <div class="book-title">A Tale of Two Cities</div>
</div>

使用 document.querySelectorAll（） 获取具有 book-wrapper 类的所有元素：

var wrappers= document.querySelectorAll('.book-wrapper');

循环访问集合，添加单击处理程序。 使用 this.querySelector（） 获取点击book-wrapper的标题：

for(var i = 0 ; i < wrappers.length ; i++) {
  wrappers[i].addEventListener('click', function(e) {
    var title= this.querySelector('.book-title').textContent;
    console.log(title);
    return title;
  });
}


var wrappers= document.querySelectorAll('.book-wrapper');
for(var i = 0 ; i < wrappers.length ; i++) {
  wrappers[i].addEventListener('click', function(e) {
    var title= this.querySelector('.book-title').textContent;
    console.log(title);
    return title;
  });
}
.book-wrapper {
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  margin-bottom: 2em;
  border: 1px solid #666;
}
<div class="book-wrapper">
  <div class="book-title">The Little Prince</div>
  <div>
    This is the story about a little prince.
  </div>
</div>
<div class="book-wrapper">
  <div class="book-title">The Little Mermaid</div>
  <div>
    This is the story about a little mermaid.
  </div>
</div>

像下面这样的东西应该适合你

<div class="book-wrapper">Click here to see name of the book</div>
<div class="book-title">Lord of the Rings</div>
<script type="text/javascript">
  var bookWrapper = document.getElementsByClassName('book-wrapper');
  for (var x = 0; x < bookWrapper.length; x++) {
     bookWrapper[x].addEventListener('click', getText);
  }
  function getText() {
    alert(document.getElementsByClassName('book-title')[0].innerHTML);
    return document.getElementsByClassName('book-title')[0].innerHTML;
  }
</script>

相关文章：