2

Tenho esse html de cartões cadastrados:

.lista-cartoneira h1 {
    font-size: 1.2rem;
    margin: 12px 0 12px 0;
    font-weight: 500;
}

.lista-cartoneira h2 {
    font-size: 1rem;
    margin: 12px 0 12px 0;
}

.lista-cartoneira img {
    width: 80px;
    height: 80px;
    max-width: 80px;
    margin: 12px;
}

.card-panel {
    padding: 0 !important;
}

.col.s9.lista-cartoneira {
    width: 75%;
    margin-left: 12px;
}

.botoes-cartoneira.row {
    height: 56px; 
    margin: 24px 0 24px 0;
}

.botoes-cartoneira.col {
    height: 56px; 
    text-align: center;
}

.atalhos-cartoneira.col i {
    margin-top: 43px;
}

.atalhos-cartoneira.col {
    height: 110px; text-align: center; color: white;
}

.item-total {
    width: 200%;
}

@media only screen and (min-width: 340px) {
    .col.s9.lista-cartoneira {
        width: 75%;
        margin-left: 0;
    }
}

@media only screen and (min-width: 600px) {
    .col.s9.lista-cartoneira {
        width: 220%;
        margin-left: 0;
    }
    .lista-cartoneira h1 {
        font-size: 1.8rem;
    }
    .lista-cartoneira h2 {
        font-size: 1.6rem;
    }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="width: 100%; overflow-x: hidden;">
                <div class="item-total">
                    <div class="col s12 m8 offset-m2 l6 offset-l3" style="width: 50%;">
                        <div class="card-panel grey lighten-5 z-depth-1">
                            <div class="row valign-wrapper">
                                <div class="col s3 lista-cartoneira" style="padding-left: 0px;">
                                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrSKKu7oCCmPKDSTU6aSsZMfnUxrVImzv42-DDnAgVBmG54Szz" alt="" class="circle responsive-img">  
                                </div>
                                <div class="col s9 lista-cartoneira">
                                    <h1>TESTE1</h1>
                                    <h2>TESTE1</h2>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
            
            <div class="col s12 m8 offset-m2 l6 offset-l3" style="width: 50%; float: right; margin-top: -136px;">
                    <div class="card-panel grey lighten-5 z-depth-1">
                        <div class="row valign-wrapper botoes">
                            <div class="atalhos-cartoneira col s3" style="background-color: #00b0ff;">
                                <i class="material-icons">phone</i>
                            </div>
                            <div class="atalhos-cartoneira col s3" style="background-color: #ffb74d;">
                                <i class="material-icons">email</i>
                            </div>
                            <div class="atalhos-cartoneira col s3" style="background-color: #757575;">
                                <i class="material-icons">place</i>
                            </div>
                             <div class="atalhos-cartoneira col s3" style="background-color: #00BFA5;">
                                <i class="material-icons">open_in_new</i>
                            </div>
                        </div>
                    </div>
                </div> 
            </div>
            
            <div style="width: 100%; overflow-x: hidden;">
                <div class="item-total">
                    <div class="col s12 m8 offset-m2 l6 offset-l3" style="width: 50%;">
                        <div class="card-panel grey lighten-5 z-depth-1">
                            <div class="row valign-wrapper">
                                <div class="col s3 lista-cartoneira" style="padding-left: 0px;">
                                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrSKKu7oCCmPKDSTU6aSsZMfnUxrVImzv42-DDnAgVBmG54Szz" alt="" class="circle responsive-img">  
                                </div>
                                <div class="col s9 lista-cartoneira">
                                    <h1>TESTE2</h1>
                                    <h2>TESTE2</h2>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
            
            <div class="col s12 m8 offset-m2 l6 offset-l3" style="width: 50%; float: right; margin-top: -136px;">
                    <div class="card-panel grey lighten-5 z-depth-1">
                        <div class="row valign-wrapper botoes">
                            <div class="atalhos-cartoneira col s3" style="background-color: #00b0ff;">
                                <i class="material-icons">phone</i>
                            </div>
                            <div class="atalhos-cartoneira col s3" style="background-color: #ffb74d;">
                                <i class="material-icons">email</i>
                            </div>
                            <div class="atalhos-cartoneira col s3" style="background-color: #757575;">
                                <i class="material-icons">place</i>
                            </div>
                             <div class="atalhos-cartoneira col s3" style="background-color: #00BFA5;">
                                <i class="material-icons">open_in_new</i>
                            </div>
                        </div>
                    </div>
                </div> 
            </div>
            
            <script type="text/javascript">
                $('.botoes').hide();
                // DESLIZA 
                var inicialX;
                addEventListener('touchstart', function(e) {
                    var toqueobj = e.changedTouches[0];
                    inicialX = toqueobj.pageX;
                }, false);
                //
                addEventListener('touchmove', function(e){
                    e.preventDefault();
                }, false)
                //
                addEventListener('touchend', function(e){
                    var toqueobj = e.changedTouches[0];
                    var distancia = toqueobj.pageX - inicialX;
                    if(distancia < 0){
                        $('.botoes').show(100);
                        $('.botoes').css('position', 'relative');
                    }
                    if(distancia > 0){
                       $('.botoes').hide(100);

                    }
                }, false)
            </script>
        </div>
    </div>

Esses cartões não sou eu quem insiro, tem uma tela de cadastro de cartão e o usuário cadastra quantos quiser, coloquei aqui só para dar de exemplo. Quando eu deslizo com os dedos para a esquerda, aparecem os botões:

inserir a descrição da imagem aqui

Podem testar no código que botei acima, funciona se tiver touch ou se quiser testar no browser.

O problema é que se o usuário criar 5 cartões por exemplo, e deslizar, TODOS os cartões vão sofrer este efeito e vão aparecer os botões.

Como faço para somente o elemento alvo sofrer a ação? Eles contém a mesma classe, mas não o mesmo id.. Só que não consigo adicionar um evento á um id, nao sei o que fazer..

Lembrando que como são inseridos pelo append, tenho que buscar os elementos assim:

$(document).on('touchstart', 'AQUI É O PROBLEMA.. Queria aplicar o evento no alvo, no cartão que foi deslizado', function (){

    });
4
  • Não ficou muito claro quem seria esse alvo. Poderia explicar melhor para que possamos ajudar? Commented 20/11/2018 às 12:34
  • @TácioBrito seria o cartão que o usuário 'deslizasse os dedos' para aparecer os botões.
    – user131623
    Commented 20/11/2018 às 12:35
  • Entendi, desculpe, é que aqui no meu teste ele apresenta de cara só o primeiro cartão. Commented 20/11/2018 às 12:38
  • @TácioBrito tranquilo.
    – user131623
    Commented 20/11/2018 às 12:40

2 Respostas 2

1

Não precisa de id neste caso, basta usar e.target (elemento que disparou o evento) e usar os métodos .closest() (encontra o ancestral) e .find() (busca um descendente).

Mas para isso melhor funcionar, coloque cada par de div (a que tem o texto com o ícone e a que possui os botões) dentro de uma div-pai e dê um nome de classe (coloquei .cartoes).

Remova os false dos eventos porque não é necessário e irá dar erro no jQuery. Remova também o evento touchmove que não vejo nenhuma função para ele, além de dar erro no jQuery com preventDefault(); porque não tem como chamar e cancelar esses eventos.

Outra sugestão, coloque a classe .botoes no CSS com display none em vez de esconder no JS com $('.botoes').hide();:

.valign-wrapper.botoes{
   display: none;
}

Veja (utilize o devtools do navegador no modo de dispositivo móvel):

// DESLIZA 
var inicialX;
$(document).on('touchstart', function(e){
   var toqueobj = e.changedTouches[0];
   inicialX = toqueobj.pageX;
});
//
//                $(document).on('touchmove', function(e){
//                    e.preventDefault();
//                })
//
$(document).on('touchend', function(e){
   var toqueobj = e.changedTouches[0];
   var distancia = toqueobj.pageX - inicialX;
   var botoes = $(e.target).closest(".cartoes").find(".botoes");
   if(distancia < 0){
      botoes
      .show(100)
      .css('position', 'relative');
   }
   if(distancia > 0){
      botoes.hide(100);
   }
})
.valign-wrapper.botoes{
   display: none;
}

.lista-cartoneira h1 {
    font-size: 1.2rem;
    margin: 12px 0 12px 0;
    font-weight: 500;
}

.lista-cartoneira h2 {
    font-size: 1rem;
    margin: 12px 0 12px 0;
}

.lista-cartoneira img {
    width: 80px;
    height: 80px;
    max-width: 80px;
    margin: 12px;
}

.card-panel {
    padding: 0 !important;
}

.col.s9.lista-cartoneira {
    width: 75%;
    margin-left: 12px;
}

.botoes-cartoneira.row {
    height: 56px; 
    margin: 24px 0 24px 0;
}

.botoes-cartoneira.col {
    height: 56px; 
    text-align: center;
}

.atalhos-cartoneira.col i {
    margin-top: 43px;
}

.atalhos-cartoneira.col {
    height: 110px; text-align: center; color: white;
}

.item-total {
    width: 200%;
}

@media only screen and (min-width: 340px) {
    .col.s9.lista-cartoneira {
        width: 75%;
        margin-left: 0;
    }
}

@media only screen and (min-width: 600px) {
    .col.s9.lista-cartoneira {
        width: 220%;
        margin-left: 0;
    }
    .lista-cartoneira h1 {
        font-size: 1.8rem;
    }
    .lista-cartoneira h2 {
        font-size: 1.6rem;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div style="width: 100%; overflow-x: hidden;">
   <div class="cartoes">
      <div class="item-total">
         <div class="col s12 m8 offset-m2 l6 offset-l3" style="width: 50%;">
            <div class="card-panel grey lighten-5 z-depth-1">
               <div class="row valign-wrapper">
                  <div class="col s3 lista-cartoneira" style="padding-left: 0px;">
                     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrSKKu7oCCmPKDSTU6aSsZMfnUxrVImzv42-DDnAgVBmG54Szz" alt="" class="circle responsive-img">  
                  </div>
                  <div class="col s9 lista-cartoneira">
                     <h1>TESTE1</h1>
                     <h2>TESTE1</h2>
                  </div>
               </div>
            </div>
         </div>
      </div>

      <div class="col s12 m8 offset-m2 l6 offset-l3" style="width: 50%; float: right; margin-top: -136px;">
         <div class="card-panel grey lighten-5 z-depth-1">
            <div class="row valign-wrapper botoes">
               <div class="atalhos-cartoneira col s3" style="background-color: #00b0ff;">
                  <i class="material-icons">phone</i>
               </div>
               <div class="atalhos-cartoneira col s3" style="background-color: #ffb74d;">
                  <i class="material-icons">email</i>
               </div>
               <div class="atalhos-cartoneira col s3" style="background-color: #757575;">
                  <i class="material-icons">place</i>
               </div>
               <div class="atalhos-cartoneira col s3" style="background-color: #00BFA5;">
                  <i class="material-icons">open_in_new</i>
               </div>
            </div>
         </div>
      </div> 
   </div>

   <div class="cartoes">
      <div style="width: 100%; overflow-x: hidden;">
         <div class="item-total">
            <div class="col s12 m8 offset-m2 l6 offset-l3" style="width: 50%;">
               <div class="card-panel grey lighten-5 z-depth-1">
                  <div class="row valign-wrapper">
                     <div class="col s3 lista-cartoneira" style="padding-left: 0px;">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrSKKu7oCCmPKDSTU6aSsZMfnUxrVImzv42-DDnAgVBmG54Szz" alt="" class="circle responsive-img">  
                     </div>
                     <div class="col s9 lista-cartoneira">
                        <h1>TESTE2</h1>
                        <h2>TESTE2</h2>
                     </div>
                  </div>
               </div>
            </div>
         </div>

         <div class="col s12 m8 offset-m2 l6 offset-l3" style="width: 50%; float: right; margin-top: -136px;">
            <div class="card-panel grey lighten-5 z-depth-1">
               <div class="row valign-wrapper botoes">
                  <div class="atalhos-cartoneira col s3" style="background-color: #00b0ff;">
                     <i class="material-icons">phone</i>
                  </div>
                  <div class="atalhos-cartoneira col s3" style="background-color: #ffb74d;">
                     <i class="material-icons">email</i>
                  </div>
                  <div class="atalhos-cartoneira col s3" style="background-color: #757575;">
                     <i class="material-icons">place</i>
                  </div>
                  <div class="atalhos-cartoneira col s3" style="background-color: #00BFA5;">
                     <i class="material-icons">open_in_new</i>
                  </div>
               </div>
            </div>
         </div> 
      </div>
   </div>
</div>

0

adicione um id para cada elemento (no caso como fará uma listagem, faça dinâmico):

<div class="col s12 m8 offset-m2 l6 offset-l3" style="width: 50%; float: right; margin-top: -136px;">
                    <div class="card-panel grey lighten-5 z-depth-1">
                        <div class="row valign-wrapper botoes">
                            <div class="atalhos-cartoneira col s3" id="botao1" style="background-color: #00b0ff;">
                                <i class="material-icons">phone</i>
                            </div>
                            <div class="atalhos-cartoneira col s3" id="botao2" style="background-color: #ffb74d;">
                                <i class="material-icons">email</i>
                            </div>
                            <div class="atalhos-cartoneira col s3" id="botao3" style="background-color: #757575;">
                                <i class="material-icons">place</i>
                            </div>
                             <div class="atalhos-cartoneira col s3" id="botao4" style="background-color: #00BFA5;">
                                <i class="material-icons">open_in_new</i>
                            </div>
                        </div>
                    </div>
                </div> 
            </div>

e abaixo o javascript

// faça um foreach na classe que todos os botões possui
$(".atalhos-cartoneira").each(function(index, el) {

  // aqui você atribui a variável botão o id do elemento
  var botao = document.getElementById(el.id);

  botao.addEventListener('touchstart', function(e) {
        var toqueobj = e.changedTouches[0];
        inicialX = toqueobj.pageX;
  }, false);

});

========== Abaixo é a resposta anterior =============

Levando em conta essa observação que fez:

$(document).on('touchstart', 'AQUI É O PROBLEMA.. Queria aplicar o evento no alvo, no cartão que foi deslizado', function (){

    });

É possível a partir daí selecionar o elemento alvo, passando como segundo parâmetro o elemento que deseja, por exemplo, como está trabalhando com classes, então passaria a classe ao qual colocou para os botões, e pode recuperar qual o botão que foi arrastado pelo this, e a partir daí pode brincar a vontade, execute esse código abaixo e teste o que fiz, a partir daí acredito que consiga fazer o que deseja:

$(document).on('touchstart', '.botoes .atalhos-cartoneira', function (e){
    // acompoanhar no cosole o elemento alvo
    console.log(this)
    // aqui usei o toggleClass para trocar a classe s3 pela s9, ficando o elemento maior
    $(this).toggleClass('s3 s9')
    // aqui adiciono o classe lista-cartoneira
    $(this).addClass('lista-cartoneira')
    // aqui oculto os botões dos cartões, atacando o elememento i do fontawsome
    $('.botoes .atalhos-cartoneira i').hide(100);
    // aqui procuro pelo i do elemento alvo e exibo ele
    $(this).find('i').show(100);
    // aqui uso o position que fez
    $(this).css('position', 'relative');
});

Espero que ajude, caso contrário, comente aqui.

4
  • A minha ideia era pegar o id e aplicar os eventos nesse id, mas nao funcionou: Por exemplo: var inicialX; id.addEventListener('touchstart', function(e) { var toqueobj = e.changedTouches[0]; inicialX = toqueobj.pageX; }, false); //e assim por diante..
    – user131623
    Commented 20/11/2018 às 13:08
  • então o que pode fazer é criar um id para cada elemento adicionado dinamicamente na hora de listá-los e utilizar uma classe igual para eles todos para pegar o id. Irei editar minha resposta para entender melhor Commented 20/11/2018 às 13:27
  • como eu insiro através do append ele não reconhece isso $(".atalhos-cartoneira").each(function(index, el) { como poderia fazer?
    – user131623
    Commented 20/11/2018 às 13:51
  • É porque com o append o elemento é carregado depois, logo o javascript não o reconhece. Nesse caso, tente assim: $(".botoes").find(".atalhos-cartoneira").each(function(index, el) { Commented 20/11/2018 às 15:29

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 .