li中第一个订单为未完成的时候，后面的li中的jtdtitle是灰色的并且不能点击，当第一个订单为已完成的的时候，后面的li才可以点击并且jtdtitle变成原来的颜色

Question

li中第一个订单为未完成的时候，后面的li中的jtdtitle是灰色的并且不能点击，当第一个订单为已完成的的时候，后面的li才可以点击并且jtdtitle变成原来的颜色

原来是这么写的但是，每次都是未定义

mounted() {
    var listItems = document.querySelectorAll('.top_home_ybtx_tips');
    if (listItems.length > 0) {
      var firstItem = listItems[0];
      if (firstItem.hasAttribute('data-jtdtitlesp')) {
        var firstItemStatus = firstItem.getAttribute('data-jtdtitlesp');
        for (var i = 1; i < listItems.length; i++) {
          var span = listItems[i].querySelector('span.jtdtitle');
          if (span) {
            if (firstItemStatus === '未完成') {
              span.style.color = '#C8C8C8';
              listItems[i].style.pointerEvents = 'none'; // 阻止点击事件
            } else if (firstItemStatus === '已完成') {
              span.style.color = ''; // 移除之前可能设置的颜色
              listItems[i].style.pointerEvents = 'auto'; // 恢复点击事件
            }
          }
        }
      }
    }
  },

原代码

<ul class="top_home_ybtx_tip">
                <li class="top_home_ybtx_tips" @click="listUrl(key)" v-for="(item,key) in list" :key="item.seq_no" :data-jtdtitlesp="item.order_status=='0' ? '未完成' : '已完成'">
                    <img src="" alt="" class="jtdimg">
                    <div class="top_home_ybtx_div">
                        <p class="top_home_ybtx_divp">
                            <span style="margin-right: 1.5rem;" class="jtdtitle"></span>
                            <span class="jtdtitlesp" :style="{ color: itemStatusColor(item.order_status) }">{{item.order_status=='0' ? '未完成' : '已完成'}}</span>
                        </p>
                        <p class="top_home_ybtx_divps">
                            <span>被保险人：<i>{{item.insured_name}}</i></span>
                            <span style="margin-left: 1rem;">保费：<i>{{item.total_premium}}</i>元</span>
                        </p>
                    </div>
                </li>
            </ul>

var vm = new Vue({
    el: '#top_home',
    data: {
        list: [],
        family_count: 0,
    },
    mounted() {
        this.loading_query();
    },
    methods: {
        loading_query() {
            $("#loadingToast").show();
            var fadata = {
                "seed_no": seed_no,
                "openid": openid_gv,
            };
            $.ajax({
                type: "post",
                url: vcommonurl + "v1/family/list/query",
                timeout: 30000,
                data: JSON.stringify(fadata),
                dataType: 'json',
                contentType: "application/json",
                success: (data) => {
                    this.family_count = data.family_count;
                    this.list = data.family;
                    updateList();
                },
                complete: function (XMLHttpRequest, status) {
                    if (status == 'timeout') {
                        $('#loadingToast').hide();
                        hxui.toast("服务器繁忙，请稍后再试！");
                    }
                },
                error: function (xhr, errorType, error) {
                    $("#loadingToast").hide();
                    hxui.toast("服务器繁忙，请稍后再试！");
                }
            });
        },
        listUrl(key) {
            plankey = key + 1
            console.log('序号', plankey)
            this.navigateToPlan();
        },
        navigateToPlan() {
            if (isFamilyPlan = "是") {
                // is_family=1为家庭单
                planUrl += "&is_family=1" + "&seq_no=" + plankey;
            }
            window.location.href = planUrl;
            console.log('链接', window.location.href)
        },
        itemStatusColor(status) {
            // 根据状态返回不同的颜色
            return status == '未完成' ? '#1AB14B' : '#FF3A31';
        },
    },
});

Answer 1

我妈已经三天没打我了 上午好☀️☀️☀️️
本答案参考ChatGPT-3.5

根据你的需求，在li中第一个订单为未完成时，后面的li中的jtdtitle应该是灰色的并且不能点击；当第一个订单为已完成时，后面的li才可以点击并且jtdtitle变成原来的颜色。

解决方案如下：

1. 在你的mounted()生命周期钩子函数中，添加以下代码来初始化li元素的状态：

mounted() {
  var listItems = document.querySelectorAll('.top_home_ybtx_tips');
  if (listItems.length > 0) {
    var firstItem = listItems[0];
    if (firstItem.hasAttribute('data-jtdtitlesp')) {
      var firstItemStatus = firstItem.getAttribute('data-jtdtitlesp');
      for (var i = 1; i < listItems.length; i++) {
        var span = listItems[i].querySelector('span.jtdtitle');
        if (span) {
          if (firstItemStatus === '未完成') {
            span.style.color = '#C8C8C8';
            listItems[i].style.pointerEvents = 'none'; // 阻止点击事件
          } else if (firstItemStatus === '已完成') {
            span.style.color = ''; // 移除之前可能设置的颜色
            listItems[i].style.pointerEvents = 'auto'; // 恢复点击事件
          }
        }
      }
    }
  }
}

这段代码会遍历li元素列表，根据第一个li元素的状态来设置后续li元素的jtdtitle颜色和点击事件的可用性。

1. 修改你的HTML代码，将你的li元素的状态值赋值给data-jtdtitlesp属性，如下所示：

<ul class="top_home_ybtx_tip">
  <li class="top_home_ybtx_tips" @click="listUrl(key)" v-for="(item,key) in list" :key="item.seq_no" :data-jtdtitlesp="item.order_status=='0' ? '未完成' : '已完成'">
    <!-- 其他li元素内容 -->
  </li>
</ul>

这样在Vue中就可以通过item.order_status的值动态设置每个li元素的状态了。

请注意，上述代码中的listUrl(key)和navigateToPlan()方法没有提供完整的代码，你需要根据你的具体需求来完善这部分逻辑。

修改后的代码如下：

var vm = new Vue({
  el: '#top_home',
  data: {
    list: [],
    family_count: 0,
  },
  mounted() {
    this.loading_query();
    this.initializeListItems();
  },
  methods: {
    loading_query() {
      // 请求数据的逻辑...
    },
    initializeListItems() {
      var listItems = document.querySelectorAll('.top_home_ybtx_tips');
      if (listItems.length > 0) {
        var firstItem = listItems[0];
        if (firstItem.hasAttribute('data-jtdtitlesp')) {
          var firstItemStatus = firstItem.getAttribute('data-jtdtitlesp');
          for (var i = 1; i < listItems.length; i++) {
            var span = listItems[i].querySelector('span.jtdtitle');
            if (span) {
              if (firstItemStatus === '未完成') {
                span.style.color = '#C8C8C8';
                listItems[i].style.pointerEvents = 'none'; // 阻止点击事件
              } else if (firstItemStatus === '已完成') {
                span.style.color = ''; // 移除之前可能设置的颜色
                listItems[i].style.pointerEvents = 'auto'; // 恢复点击事件
              }
            }
          }
        }
      }
    },
    listUrl(key) {
      // listUrl方法的逻辑...
    },
    navigateToPlan() {
      // navigateToPlan方法的逻辑...
    },
    itemStatusColor(status) {
      // itemStatusColor方法的逻辑...
    },
  },
});

希望以上解决方案对你有帮助！