<dl class="car"> <dt><p class="ck_btn" data-id="71790817"></p> <a href="goods-18976.html"><img src="https://s.cccgx.com/t/200x200/images/qu/18976/gallery/m20211019094313_99448.jpg" class="ca_pic"/></a> </dt> <dd><a href="goods-18976.html" class="gk_a">潮影森美 全硅胶性感甜心胶实体娃娃 159cm</a> <p class="ca_atr">169普通款</p> <p class="shu_ck"> <em class="cc_sub" data-id="71790817">-</em> <input type="number" id="gnum" data-id="71790817" class="gnum c_pt" min="1" value="7"/> <em class="cc_add" data-id="71790817">+</em> </p> <span class="ca_jg">¥15200.00</span> <a href="javascript:;" data-id="71790817" data-z="" class="ca_del">删除</a> </dd> </dl>>帮我做一个js代码，我点击dl标签class为car时候点一次将他class属性设置为car car_on,再次点击时恢复为car，并加上判断如果dl的class为car car_on时，将data-id和input的value值用post传值到t.php页面并回调显示在一个id为c_gprice的em标签里面,把t.php的代码也写出了

好的，以下是代码实现：

// 获取所有class为car的dl标签
const carDls = document.querySelectorAll('.car');

// 循环遍历所有dl标签，为其添加点击事件
for (let i = 0; i < carDls.length; i++) {
  carDls[i].addEventListener('click', function() {
    // 切换class样式
    if (this.classList.contains('car_on')) {
      this.classList.remove('car_on');
    } else {
      this.classList.add('car_on');
    }

    // 判断是否需要发送post请求
    if (this.classList.contains('car_on')) {
      const dataId = this.querySelector('.ck_btn').getAttribute('data-id');
      const inputValue = this.querySelector('.gnum').value;
      const xhr = new XMLHttpRequest();
      xhr.open('POST', 't.php');
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          const em = document.getElementById('c_gprice');
          em.textContent = xhr.responseText;
        }
      };
      xhr.send(`data_id=${dataId}&input_value=${inputValue}`);
    }
  });
}

以下是t.php的代码：

<?php
$dataId = $_POST['data_id'];
$inputValue = $_POST['input_value'];
// 根据传过来的dataId和inputValue进行相应的处理，最终得到$price
echo $price;
?>