0

como faco para quando eu clicar no checkbox ele marcar dinamicamente uma imagem com borda. estou tentando fazer mas ele sempre marca todas as img como poderia fazer isso. Obs: minhas img vem do banco esta tudo dinâmico.

parte dinâmica php:

<div class="btn-group" data-toggle="buttons">
    <label class="check btn btn-primary">
        <input type="checkbox" name="ck[]" value="$imagem" id="$id"> Selecionar
    </label>
<div>

parte jquery

$(".check").click(function(){
    $("img").toggleClass('clic');
});

obs. com esse código eu consigo marcar a img porem todas e não e isso que eu quero eu queria marcar somente as respectivas que eu clicar. exemplo c eu clicar na primeira img marcar só ela e depois se eu marcar a quinta img marcar somente ela. no final eu terei 2 marcadas que eu escolhi a img 1 e a 5

codigo completo php:

require"sys/conexao.php";
                $nome = $_GET['noivos'];
                $nomeurl = $_GET['noivos'];
                $sql = mysqli_query($mysqli, "SELECT * FROM galeria WHERE email = '$nome'");
                while($aux = mysqli_fetch_assoc($sql)){

                        $titulo = $aux['nome_galeria'];
                        $imagem = $aux['img'];
                        $img_big = $aux['img_big'];
                        $id = $aux['id'];
                        $_SESSION['id'] = $id;

            print"
            <div class=\"col-lg-3 col-md-4 col-sm-6 col-xs-12\">
                <div class=\"hovereffect\">
                    <img class=\"img-responsive\" src=\"images/small/selecao/$imagem\" alt=\"\">
                    <div class=\"overlay\">
                        <div class=\"pad\">
                        <h2>$titulo</h2>
                            <a class=\"info test-popup-link\" href=\"images/big/selecao/$img_big\"><span class=\"corr\"><i class=\"fa fa-search\"></i></span></a>
                            <div class=\"btn-group\" data-toggle=\"buttons\">
                              <label class=\"check btn btn-primary\">
                                <input type=\"checkbox\" name=\"ck[]\" value=\"$imagem\" id=\"$id\"> Selecionar
                              </label>
                            </div>
                       </div>
                    </div>
                </div>
            </div>";
        }
        mysqli_close($mysqli);

1 Resposta 1

1

O ideal seria ver como está gerando o HTML das imagens mas a ideia é, vamos supor que o "value" do checkbox que tem $imagem, seja o mesmo "id" da imagem. Ou seja

Então ficaria assim:

$(".check").click(function(){
   $('#'+$(this).val()).toggleClass('clic');
});

Edit:

Sugiro que vc use esse id auxiliar que você já está usando para o checkbox na imagem também vamos somar 100 nele para não misturar olha só como ficaria:

require"sys/conexao.php";
                $nome = $_GET['noivos'];
                $nomeurl = $_GET['noivos'];
                $sql = mysqli_query($mysqli, "SELECT * FROM galeria WHERE email = '$nome'");
                while($aux = mysqli_fetch_assoc($sql)){

                        $titulo = $aux['nome_galeria'];
                        $imagem = $aux['img'];
                        $img_big = $aux['img_big'];
                        $id = $aux['id'];
                        $idimg = $aux['id']+100;
                        $_SESSION['id'] = $id;

            print"
            <div class=\"col-lg-3 col-md-4 col-sm-6 col-xs-12\">
                <div class=\"hovereffect\">
                    <img class=\"img-responsive\" src=\"images/small/selecao/$imagem\" id=\"$idimg\" alt=\"\">
                    <div class=\"overlay\">
                        <div class=\"pad\">
                        <h2>$titulo</h2>
                            <a class=\"info test-popup-link\" href=\"images/big/selecao/$img_big\"><span class=\"corr\"><i class=\"fa fa-search\"></i></span></a>
                            <div class=\"btn-group\" data-toggle=\"buttons\">
                              <label class=\"check btn btn-primary\">
                                <input type=\"checkbox\" name=\"ck[]\" value=\"$imagem\" id=\"$id\" imgref=\"$idimg\"> Selecionar
                              </label>
                            </div>
                       </div>
                    </div>
                </div>
            </div>";
        }
        mysqli_close($mysqli)

Então eu criei um id auxiliar para a imagem e coloquei no atributo id da img, e também criei uma tributo imgref no checkbox para deixar o id lá. O js ficaria assim agora:

   $(".check").click(function(){
       $(this).closest('img').toggleClass('clic');
    });
9
  • esse value $imagem são os valores da img que o cara selecionar para enviar pro banco. você quer ver o código inteiro onde com o php gero as img dinamicamente? 8/01/2016 às 14:28
  • sim mostre todo o código
    – Guerra
    8/01/2016 às 14:34
  • ok vo editar a perg 8/01/2016 às 14:38
  • edite a perg olha la 8/01/2016 às 14:39
  • 1
    agora foi so que eu tive que trocar esse img no closest por hovereffect minha classe 8/01/2016 às 16:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .