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

我有以下代码，根据单击的按钮显示和隐藏元素：

HTML:

JQUERY：

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

---

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

尝试这样的方法：

$(".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();
});

---

您只需将

同级

（更少的函数调用！）与

this

结合使用，即可遍历DOM，然后只需

切换

它们（或者保留

隐藏

和

显示

，如果愿意的话）

---

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

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>

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

$(".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();    
}

jQuery：

<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>

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

$(".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();    
}

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

---

希望它有用

“不能让按钮单独工作”是什么意思？你们在页面中隐藏了所有的按钮？我从来不知道兄弟姐妹，所以我+1。每天都是上学的日子！第四次发现后有一个错别字，错点。然而，这是可行的。