Cleaning div edge with jQuery

Asked

Viewed 115 times

1

How do I clean the edge of a DIV in Loop with jQuery?

For example, I’m with a modal, looping database data with Json, I have a button to select each item returned from that list-(loop), then I did the following, created a class name: borda_310 <- borda_id_do_product, then when I give a select I can create an edge on that loop item, but if I select the other items also selects, ie it gets all selects the ones I clicked, I want you to click one and select, when clicking another selects the other and removes the edge from the previous.

My HTML code:

<div class="col-md-3 li">
        <div class="product borda_' + data.dados[a].post_id + '">
            <ul class="product-labels"> 
                <li>' + data.dados[a].aluguei + '</li>
            </ul>
            <div class="product-img-wrap">
                <img class="product-img-primary" style="height:150px;" src="<?= BASE; ?>/uploads/' + data.dados[a].post_cover + '" alt="' + data.dados[a].post_title + '" title="' + data.dados[a].post_title + '" />
                <img class="product-img-alt" style="height:150px;" src="<?= BASE; ?>/uploads/' + data.dados[a].post_cover + '" alt="' + data.dados[a].post_title + '" title="' + data.dados[a].post_title + '" />
            </div>
            <div class="product-caption">
                <h5 class="product-caption-title">' + data.dados[a].post_title + '</h5>
                <div class="product-caption-price">
                    <span class="product-caption-price-new">
                        <a data-id_select="' + data.dados[a].post_id + '" class="btn btn-primary selecionar_jogo disabled_'+ data.dados[a].post_id +'" href="#">Selecionar</a>
                    </span>
                </div>
            </div>
        </div>
    </div>

My jquery code:

$(".lista_jogos").on("click", "a.selecionar_jogo", function (e) {
        var id_relacionamento = $(this).attr('id-jogo');
        var id_jogo = $(this).attr('data-id_select');
        $('.borda_' + id_jogo).attr('style', 'border:2px solid red');
        //alert(id_relacionamento+' - '+id_jogo);
    });

I’m waiting for someone to solve the problem with me.

php javascript jquery

  • I think you’re doing it wrong, using unnecessary ids that will only hinder your code. Show HTML to see how the structure of the elements is.

  • I put the HTML there

  • Another thing: no need to use different classes just to know what number she has to select: $('.borda_' + id_jogo)... elements with the same styles or for the same purpose must have the same class. Distinct identification should be used only with ids, and sometimes not even accurate.

  • I actually created this class there just to differentiate at the time of the click, more as I am not an expert in jQuery, I look forward to the help of you and others.

1 answer

1


Change the class of div to, leaving only borda:

<div class="product borda">

And the jQuery:

$(document).on("click", "a.selecionar_jogo", function (e) {
   e.preventDefault();
   $(".product.borda")
   .css("border", "none");

   $(this)
   .closest('.product.borda')
   .css('border', '2px solid red');
});

Then you can remove this data-id_select if it serves no purpose.

Example:

$(document).on("click", "a.selecionar_jogo", function (e) {
   e.preventDefault();
   $(".product.borda")
   .css("border", "none");
   
   $(this)
   .closest('.product.borda')
   .css('border', '2px solid red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 li">
     <div class="product borda">
         <ul class="product-labels"> 
             <li>' + data.dados[a].aluguei + '</li>
         </ul>
         <div class="product-img-wrap">
             <img class="product-img-primary" style="height:150px;" src="<?= BASE; ?>/uploads/' + data.dados[a].post_cover + '" alt="' + data.dados[a].post_title + '" title="' + data.dados[a].post_title + '" />
             <img class="product-img-alt" style="height:150px;" src="<?= BASE; ?>/uploads/' + data.dados[a].post_cover + '" alt="' + data.dados[a].post_title + '" title="' + data.dados[a].post_title + '" />
         </div>
         <div class="product-caption">
             <h5 class="product-caption-title">' + data.dados[a].post_title + '</h5>
             <div class="product-caption-price">
                 <span class="product-caption-price-new">
                     <a data-id_select="' + data.dados[a].post_id + '" class="btn btn-primary selecionar_jogo disabled_'+ data.dados[a].post_id +'" href="#">Selecionar</a>
                 </span>
             </div>
         </div>
     </div>
     <div class="product borda">
         <ul class="product-labels"> 
             <li>' + data.dados[a].aluguei + '</li>
         </ul>
         <div class="product-img-wrap">
             <img class="product-img-primary" style="height:150px;" src="<?= BASE; ?>/uploads/' + data.dados[a].post_cover + '" alt="' + data.dados[a].post_title + '" title="' + data.dados[a].post_title + '" />
             <img class="product-img-alt" style="height:150px;" src="<?= BASE; ?>/uploads/' + data.dados[a].post_cover + '" alt="' + data.dados[a].post_title + '" title="' + data.dados[a].post_title + '" />
         </div>
         <div class="product-caption">
             <h5 class="product-caption-title">' + data.dados[a].post_title + '</h5>
             <div class="product-caption-price">
                 <span class="product-caption-price-new">
                     <a data-id_select="' + data.dados[a].post_id + '" class="btn btn-primary selecionar_jogo disabled_'+ data.dados[a].post_id +'" href="#">Selecionar</a>
                 </span>
             </div>
         </div>
     </div>
 </div>

  • It worked fine bro, however I can not remove the attributes, pq I will send via post to handle in PHP, it was perfect, thank you! How do I get your services?

Browser other questions tagged php javascript jquery

You are not signed in. Login or sign up in order to post.