javascript - 显示/隐藏列表选择全部而不是单独选择

Question

我有以下代码，它根据被点击的按钮显示和隐藏元素:

HTML:

<div class="largeImage">
    <div class="uploadItem.NameContainer">
        <img src="thumbNail1.jpg" alt="thumbNail1.jpg"/>
    </div>
    <div class="galleryButtonContainer">
        <div class="editButton">
            <input type="button" value="Click to Rename" />
        </div>
        <div class="cancelRenameButton">
            <input type="button" value="Cancel Rename" />
        </div>
        <div class="renameButton" >
                <input type="submit" value="Rename" />
        </div>
        <div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
        <div class="deleteButton">
                <input type="submit" value="Delete" />
        </div>
    </div>
</div>

<div class="largeImage">
    <div class="uploadItem.NameContainer">
        <img src="thumbNail2.jpg" alt="thumbNail2.jpg"/>
    </div>
    <div class="galleryButtonContainer">
        <div class="editButton">
            <input type="button" value="Click to Rename" />
        </div>
        <div class="cancelRenameButton">
            <input type="button" value="Cancel Rename" />
        </div>
        <div class="renameButton" >
                <input type="submit" value="Rename" />
        </div>
        <div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
        <div class="deleteButton">
                <input type="submit" value="Delete" />
        </div>
    </div>
</div>

CSS:

.galleryButtonContainer .cancelRenameButton {display:none;}
.galleryButtonContainer .renameButton {display:none;}

JQUERY:

$(".editButton").click(function () {
    $(".renameButton,.cancelRenameButton").show();
    $(".editButton").hide();
});
$(".cancelRenameButton").click(function () {
    $(".renameButton,.cancelRenameButton").hide();
    $(".editButton").show();
});

我遇到的问题是我无法让按钮单独工作。我试过使用“this”但没有成功

Answer 1

您可以简单地使用 siblings(更少的函数调用!)结合 this 来遍历 DOM，然后只是切换它们(或保留 hide 和 show(如果您愿意)。

JSFiddle here

$(".editButton").click(function () {
    $(this).toggle().siblings(".renameButton,.cancelRenameButton").toggle();

});
$(".cancelRenameButton").click(function () {
    $(this).toggle().siblings(".renameButton,.cancelRenameButton").toggle();
});