没有父选择器和子选择器简化代码

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>