第一个li中为未完成，剩下的li标题为灰色，并且整个li都不能点击

Question

第一个列表项（li）的jtdtitlesp为"未完成"时，所有后续列表项中的的颜色为 灰色，并且这些列表项不可点击。而当第一个列表项的jtdtitlesp为"已完成"时，后续列表项中的颜色恢复正常，并且这些列表项可点击。

<ul class="top_home_ybtx_tip">
                <li class="top_home_ybtx_tips" @click="listUrl(index)" v-for="(item,key) in list" :key="index" :class="{ 'disabled': index > 0 && isFirstItemCompleted }">
                    <img src="" alt="" class="jtdimg">
                    <div class="top_home_ybtx_div">
                        <p class="top_home_ybtx_divp">
                            <span style="margin-right: 3rem;" class="jtdtitle" :style="titleColor(index)"></span>
                            <span class="jtdtitlesp" :style="{ color: itemStatusColor(item.jtdtitlesp) }">{{item.jtdtitlesp}}</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: [],
        list: [
            // 假设这是从后端获取的数据
            {
                jtdtitlesp: '未完成',
                insured_name: '张三',
                total_premium: '10000',
            },
            {
                jtdtitlesp: '未完成',
                insured_name: '张四',
                total_premium: '15000',
            },
            {
                jtdtitlesp: '未完成',
                insured_name: '发过的',
                total_premium: '250000',
            },
        ],
        firstItemStatus: '' // 用来存储第一个列表项的状态
    },
    mounted: function () {
        // 在组件挂载后设置第一个列表项的状态
    this.firstItemStatus = this.list[0].jtdtitlesp;
    },
    computed: {
        // 可以添加一个计算属性来简化第一个项目的状态检查
    isFirstItemCompleted() {
      return this.firstItemStatus == '已完成';
    }
  },
    methods: {
        listUrl(index) {
            // 如果第一个项目已完成且当前不是第一个项目，则阻止点击
      if (this.isFirstItemCompleted && index != 0) {
        return;
      }
      this.navigateToPlan();
    },
    navigateToPlan() {
      // 假设commonurl_front和filurls是外部定义的变量或常量
      window.location.href = commonurl_front + filurls + "/plan.html" + location.search;
    },
    itemStatusColor(status) {
      // 根据状态返回不同的颜色
      return status == '未完成' ? '#FF3A31' : '#1AB14B';
    },
    titleColor(index) {
      // 根据第一个列表项的状态返回不同的颜色
            return index > 0 && this.isFirstItemCompleted ? '#C8C8C8' : '';
    }
    },
});

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

问题：当第一个列表项的jtdtitlesp为"未完成"时，如何让后续列表项的变成灰色、不可点击？当第一个列表项的jtdtitlesp为"已完成"时，如何让后续列表项的恢复成正常颜色、可点击状态？ 解决方案： 1. 找到第一个列表项的jtdtitlesp值 假设我们的HTML代码如下： ```

• 任务1
• 任务2
• 任务3

``` 首先要用JavaScript获取第一个列表项的jtdtitlesp值，代码如下： ``` var firstItem = document.querySelector("li"); var firstItemStatus = firstItem.getAttribute("jtdtitlesp"); ``` 2. 根据第一个列表项的jtdtitlesp值，改变后续列表项的样式和状态 根据第一步得到的第一个列表项的jtdtitlesp值，我们可以使用JavaScript修改后续列表项的样式和状态。 如果第一个列表项的jtdtitlesp值为"未完成"，则需要将后续列表项的span标签的颜色改为灰色，同时让后续列表项无法点击。代码如下： ``` if (firstItemStatus === "未完成") { var spans = document.querySelectorAll("li:not(:first-child) span"); for (var i = 0; i < spans.length; i++) { spans[i].style.color = "gray"; spans[i].style.pointerEvents = "none"; } } ``` 如果第一个列表项的jtdtitlesp值为"已完成"，则需要将后续列表项的span标签的颜色恢复正常，同时让后续列表项可以点击。代码如下： ``` if (firstItemStatus === "已完成") { var spans = document.querySelectorAll("li:not(:first-child) span"); for (var i = 0; i < spans.length; i++) { spans[i].style.color = "black"; spans[i].style.pointerEvents = "auto"; } } ``` 代码说明： 1. 首先使用querySelector方法选中第一个li元素，然后用getAttribute方法获取它的jtdtitlesp值，将其存储在firstItemStatus变量中。 2. 如果第一个列表项的jtdtitlesp值为"未完成"，则使用querySelectorAll方法选中除第一个外的所有li元素中的span标签，然后使用for循环依次修改每个span标签的颜色和可点击状态。 3. 如果第一个列表项的jtdtitlesp值为"已完成"，则同样使用querySelectorAll方法选中除第一个外的所有li元素中的span标签，然后使用for循环依次恢复每个span标签的颜色和可点击状态。需要注意的是，pointer-events属性的值为auto表示元素可以被点击，而值为none表示元素不可被点击。 案例演示： 以下为一个简单的案例，其中第一个列表项的jtdtitlesp值为"未完成"，点击"修改状态"按钮后，后续列表项中的span标签变成灰色且不可点击；再次点击"修改状态"按钮后，后续列表项中的span标签恢复正常颜色且可以点击。 https://codepen.io/lydiaxian/pen/WNRbXNg