简化无父母和孩子选择

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>