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和{ {1}}如果你愿意的话。）

JSFiddle here

show

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并仅处理按钮。

希望它有用！

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

3 个答案: