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

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，然后将其toggle掉（或者如果您愿意，可以hide和show ）。

JSFiddle在这里

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

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

Answer 2

尝试这样的事情：

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

Answer 3

如果我理解你想做什么。 这可能是一个可能的解决方案：

HTML ：

<div class="largeImage">
    <div class="uploadItem.NameContainer">
        <img src="thumbNail1.jpg" alt="thumbNail1.jpg"/>
    </div>
    <div class="galleryButtonContainer">

        <div class="editButton" name="form1">
            <input type="button" value="Click to Rename"/>
        </div>
        <div class="cancelRenameButton" name="form1">
            <input type="button" value="Cancel Rename" />
        </div>
        <div class="renameButton" name="form1">
                <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" name="form2">
            <input type="button" value="Click to Rename" />
        </div>
        <div class="cancelRenameButton" name="form2">
            <input type="button" value="Cancel Rename" />
        </div>
        <div class="renameButton" name="form2">
                <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, .cancelRenameButton").click(function () {
    Toggle($(this));
});

function Toggle(obj){
    var name = obj.attr("name");
    $(".renameButton[name="+name+"],.cancelRenameButton[name="+name+"]").toggle();
    $(".editButton[name="+name+"]").toggle();    
}

检查此链接jsfiddle以查看其工作原理。 我认为，更好的解决方案是删除div并仅处理按钮。

希望它有用！