簡化無父母和孩子選擇

Question

$(document).ready(function(){ 
    $(".EditBusinessName").hide(); 

    $(".editBtn a").click(function() {  
     $(this).parent().parent('.myBusinessEdit').children('.EditBusinessName').show(); 
     $(this).hide(); 
    }); 

    $(".EditBusinessName a").click(function() { 
     $(this).parent().parent(".EditBusinessName").hide(); 
     $(this).parent().parent().parent().children(".editBtn").children("a").show(); 
    }); 
}); 

我怎麼能簡化上述代碼的代碼，而無需使用parent()和children()選擇？ div類myBusinessEdit將是每個部分的通用類。

http://plnkr.co/edit/xgP49K51urBvZQlyLGxQ?p=preview

Answer 1

邏輯本身是相當明顯的，所以沒有太多的簡化可以做。您當然可以使用closest()和find()使代碼與HTML結構中父/子元素的數量減少嚴格對齊。試試這個：

$(".editBtn a").click(function() { 
 
    $(this).hide().closest('.myBusinessEdit').find('.EditBusinessName').show(); 
 
}); 
 

 
$(".EditBusinessName a").click(function() { 
 
    $(this).closest(".EditBusinessName").hide(); 
 
    $(this).closest('.myBusinessEdit').find(".editBtn a").show(); 
 
});

a { 
 
    border: solid 1px red; 
 
} 
 
.EditBusinessName { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="myBusinessEdit"> 
 
    <div class="editBtn"><a id="">Edit</a></div> 
 
    <div class="EditBusinessName"> 
 
     <div class=""> 
 
      XBusinessName 
 
      <a id="">Cancel</a> 
 
     </div> 
 
    </div> 
 
</div> 
 

 

 
<div class="myBusinessEdit"> 
 
    <div class="editBtn"><a id="">Edit</a></div> 
 
    <div class="EditBusinessName"> 
 
     <div class=""> 
 
      XBusinessName 
 
      <a id="">Cancel</a> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="myBusinessEdit"> 
 
    <div class="editBtn"><a id="">Edit</a></div> 
 
    <div class="EditBusinessName"> 
 
     <div class=""> 
 
      XBusinessName 
 
      <a id="">Cancel</a> 
 
     </div> 
 
    </div> 
 
</div>