首页 > 解决方案 > 使用 jquery 在 js 中运行数据 forEach 并且它没有执行开关中的每个项目

问题描述

在下面的代码中,我尝试遍历存储对象,如果大小写匹配,它应该向元素添加一个类:

    const localData = {
    Direction: "1",
    Lamination: "3",
    Stock: "10",
    exit_popup: "true",
    job_name: "test",
    length: 8,
    prod-height: "3",
    prod-width: "2",
    slct: "2",
}

function checkPrevInputs(localData) {
console.log('running');
console.log(localData);
  Object.keys(localData).forEach((item, i) => {
    switch (item) {
      case 'job_name':
        $('#job_name').val(localData[item]);
        break;
      case 'prod-height':
        $('#prod-height').val(localData[item]);
        break;
      case 'prod-width':
        $('#prod-width').val(localData[item]);
        break;
      case 'slct':
        $('#slct').val(localData[item]);
        break;
      case 'Stock':
        const elStock = $(`.el-selection[data-type="Stock"][data-id="${localData[item]}"]`);
        elStock.addClass('selectedBtnOption');
        elStock.prev('.tab-navigation').addClass('selection-made');
        break;
      case 'Lamination':
        const elLamination = $(`.el-selection[data-type="Lamination"][data-id="${localData[item]}"]`);
        elLamination.addClass('selectedBtnOption');
        elLamination.prev('.tab-navigation').addClass('testingaddition');
        break;
      case 'Direction':
        const elDirection = $(`.el-selection[data-type="Direction"][data-id="${localData[item]}"]`);
        elDirection.addClass('selectedBtnOption');
        elDirection.prev('.tab-navigation').addClass('selection-made');
        break;
      default:

    }
  });

}

在下面的 HTML 中,即使 Lamination 位于被循环的对象中并且它出现在 dom 中,也没有添加该类:

<div class="tab-navigation" style="padding-bottom: 10px;">
                                              <button class="btn btn-solid navigate" value="2">
                                                  Previous
                                              </button>
                                              <button class="btn btn-solid navigate" value="4">
                                                  Next
                                              </button>
                                          </div>

                                          <div class="row justify-content-md-center el-selection vertical-align" data-type="Lamination" data-id="3">
                                                <div class="col-md-3">
                                                  <img src="http://127.0.0.1:8000/storage/coating/iKXG8mhCIW5q5YoKp8YXplZmUeSIydldZvZ3ldQk.svg" alt="" class="w-100 img-fluid blur-up lazyload image_zoom_cls-0">
                                                </div>
                                                <div class="col-md-6">
                                                  <h6 class="product-title">Gloss Lamination</h6>
                                                  <button class="btn btn-outline btn-sm detailsToggle">Show me details</button>
                                                </div>
                                                                                                  <div class="col-md-3">
                                                    <img src="http://127.0.0.1:8000/assets/images/icon/popular.svg" alt="" class="w-100 img-fluid blur-up lazyload image_zoom_cls-0">
                                                  </div>
                                                                                            </div>

你可以看到我有: data-type="Lamination" 但 prev .tab-navigation 似乎没有被触发。知道我做错了什么吗?

标签: javascriptjquery

解决方案


Jquery 找不到您的元素,因为您已经Lamination: "3"在 localData obj 和data-id="2"HTML 标记中进行了设置。

除此之外,代码可以正常工作。在此处输入图像描述


推荐阅读