2
I have this html of registered cards:
.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>These cards are not me who insert, have a card registration screen and the user register as many as you want, I put here just to give an example. When I slide my fingers to the left, the buttons appear:
They can test in the code I put above, it works if you have touch or if you want to test in the browser.
The problem is that if the user creates 5 cards for example, and slides, ALL the cards will suffer this effect and the buttons will appear.
How do I only make the target element suffer the action? They contain the same class, but not the same id.. I just can’t add an event to an id, I don’t know what to do..
Remembering that as they are inserted by the append, I have to search for the elements like this:
$(document).on('touchstart', 'AQUI É O PROBLEMA.. Queria aplicar o evento no alvo, no cartão que foi deslizado', function (){
});
It wasn’t very clear who that would be target. Could you explain better so we can help?
– Tácio Brito
@Taciiobrito would be the card that the user 'swipe his fingers' to appear the buttons.
– user131623
I get it, I’m sorry, it’s just that here in my test it presents just the first card.
– Tácio Brito
@Silent silent.
– user131623