Tengo el siguiente código, que muestra y oculta elementos según los botones en los que se hace clic:

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

El problema que tengo es que no puedo hacer que los botones funcionen individualmente. He intentado usar 'esto' sin éxito

1
user2151345 5 sep. 2014 a las 19:20

3 respuestas

La mejor respuesta

Prueba algo como esto:

$(".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();
});
1
Bla... 6 sep. 2014 a las 10:14

Simplemente puede usar siblings (¡menos llamadas a funciones!) En combinación con this para atravesar el DOM y luego simplemente toggle lejos (o mantener hide y {{X4} } si tu prefieres).

JS Violín aquí

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

});
$(".cancelRenameButton").click(function () {
    $(this).toggle().siblings(".renameButton,.cancelRenameButton").toggle();
});
2
GillesC 5 sep. 2014 a las 15:31

Si entendí bien lo que quieres hacer. Esta puede ser una posible solución:

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

Consulte este enlace jsfiddle para ver cómo funciona. Creo que una mejor solución sería eliminar los divs y tratar solo con botones.

Espero que sea útil!

0
Academia 6 sep. 2014 a las 11:37