wie zu deaktivieren klicken Sie auf das img-Tag unter der Liste in jquery?

Question

Ich habe eine Liste von 4 Bildern nacheinander verwendet, beim Klicken auf jedes Bild wird ein Inhalt in derselben HTML-Seite geöffnet. Jetzt ist das Problem, ich möchte bestimmte Bedingung in jQuery geben, so dass, wenn ich auf img1 klicken, dann nur klicken Option sollte auf img2 erscheinen. Wenn ich auf img2 klicke, dann sollte nur klick Option auf img3 erscheinen. Mein Code ist

<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> 

Und meine Jquery-Code ist

$(".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(); 
} 

Wie codition basierend auf Optionen mit jQuery geben?

Answer 1

Mit 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>