jquery - 如何禁用jquery列表下img标签的点击？

Question

我依次使用了 4 个图像的列表，单击每个图像时，将在同一个 html 页面中打开内容。现在的问题是我想在 jQuery 中给出特定条件，这样如果我单击 img1 ，那么只有单击选项应该出现在 img2 上。如果我点击img2，那么只有点击选项应该出现在img3上。我的代码是

<ul id="one">
            <li  class="list1"><img id="img1" src="images/assets/tool_deactive.png" > <img class="act1" style="display:none" src="images/assets/tool_active.png"><span class="para">Tools</span>

            <li class="list2"><img id="img2" src="images/assets/protocol_dec.png"Disabled><img class="act2" style="display:none" src="images/assets/protocol_act.png"><span class="para">Protocols</span>
            </li>
            <li class="list3"><img id="img3" src="images/assets/data_dec.png"><img class="act3" style="display:none" src="images/assets/data_act.png"><span class="para">Data Generation</span>
            </li>
            <li class="list4"><img id="img4" src="images/assets/rules_dec.png"><img class="act4" style="display:none" src="images/assets/rules_act.png"><span class="para">Rules</span>
            </li>

        </ul>

我的 jquery 代码是

$(".list1").click(function() {
        $(".rule2").hide();
        $(".mid1").show();
}
$(".list2").click(function() {
        $(".rule3").hide();
        $(".mid2").show();
}
$(".list3").click(function() {
        $(".rule4").hide();
        $(".mid3").show();
}
$(".list4").click(function() {
        $(".rule1").hide();
        $(".mid4").show();
}

如何使用 jQuery 提供基于条件的点击选项？

Answer 1

With Pointer Events

$(".list").off("click").on("click",function(){
  $(".rule").eq($(this).index()).hide();
  $(".mid").eq($(this).index()).show();
  console.log("Hello")
  $(this).addClass("none-events").next().removeClass("none-events")
})

.none-events{
  pointer-events:none;
}
.list{
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="one">
            <li  class="list"><img id="img1" src="images/assets/tool_deactive.png" > <img class="act1" style="display:none" src="images/assets/tool_active.png"><span class="para">Tools</span>

            <li class="list none-events"><img id="img2" src="images/assets/protocol_dec.png"Disabled><img class="act2" style="display:none" src="images/assets/protocol_act.png"><span class="para">Protocols</span>
            </li>
            <li class="list none-events"><img id="img3" src="images/assets/data_dec.png"><img class="act3" style="display:none" src="images/assets/data_act.png"><span class="para">Data Generation</span>
            </li>
            <li class="list none-events"><img id="img4" src="images/assets/rules_dec.png"><img class="act4" style="display:none" src="images/assets/rules_act.png"><span class="para">Rules</span>
            </li>

        </ul>