Question

我用PHP从BBDD中获取信息打印这个按钮：

print "
<div class='col-sm-6 col-md-6 col-lg-3 col-xl-3 cartasdos'>
    <figure><img class='imagenEditar' height='190px' width='100%' src='../img/relatos/".$fila['imagen']."'></figure>
    <h3>".$fila['titulo']."</h3>
    <h5>".$fila['autor']."</h5>
    <h6 class='resumen'> ".$fila['sinopsis']." </h6>
    <a href='index.php?id=".$fila['id']."' class='btn btn-info' role='button'>Editar</a>

   <input type='button' class='btn btn-danger borrar ' value='Borrar'>
    <a href='crud.php?id=".$fila['id']."' class='btn btn-danger si'  role='button'>Borrar</a>
    <input type='button' class='btn btn-black cancelar' value='Cancelar'>
</div>";

然后使用jquery我想要隐藏并显示按钮分开但是当我按下其中一个按钮时它会影响到所有按钮。这是jQuery：

<script>
$(document).ready(function(){
    $(".si").hide();
    $(".cancelar").hide();

    var botones=document.querySelectorAll(".borrar");

    for(i=0;i<botones.length;i++){    
        botones[i].addEventListener("click",cancelar,false);
    }
});

function cancelar(e){
    $(".si").toggle();
    $(".cancelar").toggle();
    $(e.target).toggle();

    $(".cancelar").on("click", function(){
        $(".borrar").show();
        $(".si").hide();  
        $(".cancelar").hide();
    });
}
</script>

我怎么能这样做？

Answer 1

您可以使用选择器上的click()和按钮上的toggle()切换每个按钮，例如：

$("selector").click(function(){
    $(".yourtBtn").toggle();
});

Answer 2

您希望使用$(this)来确定要对其执行的项目。这是差异的一个例子：

https://jsfiddle.net/dto07w65/1/

在您的情况下，它可能类似于：

<script>
$(function() {
    // When you click on any elements with this class
    $(".cancelar").on("click", function(){
        e.preventDefault();
        // Get the parent that wraps this particular clicked element
        var parent = $(this).parents('.cartasdos');
        // Once selected, show just this element
        parent.find(".borrar").show();
        // Hide all the others
        parent.find(".si").hide();
        parent.find(".cancelar").hide();
    });
});
</script>

我不是100％你希望你的按钮如何工作，但他展示了如何使用$(this)隔离。

Answer 3

我终于用增加的$ id来解决它，在bucle中打印按钮y在主要按钮中写入$ id，在其余的按钮中我将它放在类中：

$id=0;
  while($fila=mysqli_fetch_array($res)){
  $id++;
  print "
        <div class='col-sm-6 col-md-6 col-lg-3 col-xl-3 cartasdos'>
        <figure><img class='imagenEditar' height='190px' width='100%' src='../img/relatos/".$fila['imagen']."'></figure>
        <h3>".$fila['titulo']."</h3>
        <h5>".$fila['autor']."</h5>
        <h6 class='resumen'> ".$fila['sinopsis']." </h6>
        <a href='index.php?id=".$fila['id']."' class='btn btn-info' role='button'>Editar</a>

        <input type='button' class='btn btn-danger borrar' id='".$id."' value='Borrar'>

        <p class='seguro ".$id."'>Ana, ¿Estás segura?</p>
        <a href='crud.php?id=".$fila['id']."' class='btn btn-danger si ".$id."'  role='button'>Borrar</a>
        <input type='button' class='btn btn-black cancelar ".$id."' value='Cancelar'>
        </div>
                ";

                }

在jquery代码中，我将e.target.id用于类中带有$ id的按钮，将e.target用于带有$ id的主要按钮：

<script>
$(document).ready(function(){

    $(".seguro").hide();
    $(".si").hide();
    $(".cancelar").hide();

    var botones=document.querySelectorAll(".borrar");

    for(i=0;i<botones.length;i++){

        botones[i].addEventListener("click",cancelar,false);

    }

});

function cancelar(e){

    $("."+e.target.id).slideDown('slow');
    $(e.target).slideUp('slow');

    $(".cancelar").on("click", function(){

        $(e.target).slideDown('slow');
        $("."+e.target.id).slideUp('slow');

    });

}

</script>

动态创建按钮的单独功能

3 个答案: